PDA

View Full Version : Calendar based on Full Calendar



blessan
22 Jul 2010, 4:34 AM
I created a calendar which is based on the FullCalendar
(http://arshaw.com/fullcalendar/).
I modified the code a bit so that all the buttons in the default calendar are placed on the panel toolbar.
I tested it in iphone and ipad. Check it out. Might be useful for you.
Heres a screen shot
http://img837.imageshack.us/img837/9039/calendars.png

the files can be downloaded at

http://rapidshare.com/files/408381790/calendar.zip

isaacueca
25 Jul 2010, 8:21 AM
Hi Thank you so much for posting the file. However I'm unable to download it in Rapidshare: "This file is neither allocated to a Premium Account, or a Collector's Account, and can therefore only be downloaded 10 times." Is it possible to post it somewhere else?

Many thanks in advance

Isaac

blessan
25 Jul 2010, 7:51 PM
Oh i didnt know about the 10 download limit. Well here are the files. I added a swipe event. Now the next and previous month,week and day can be taken be swiping on the calendar to either left or right.
Here are the new files.

http://www.mediafire.com/?fg4f47jlp64b0bo

blessan
3 Aug 2010, 11:30 PM
So how do u find it?

gabrielstuff
6 Aug 2010, 5:28 AM
Hi !
Thank you for sharing, unfortunately, I have an error when launching your app.

The app is located at

http://localhost/~igab/Calendar/demoCalendar.html

When running from chrome I have no error until I click on viewdemo button.
Then the panel slides and the month is being displayed with the bottom toolbar and top toolbar showed.

But no days or week display.

In the consol I have the following error :


Uncaught SyntaxError: Unexpected end of input demoCalendar.html

And then if I decide to click on Month day or week, the Month title turn off and nothing happen.

Thank you !

isaacueca
9 Aug 2010, 7:30 AM
This code is awesome! thank you so much for sharing it

evertonce
11 Aug 2010, 7:52 AM
tanks good job

blessan
12 Aug 2010, 3:11 AM
Glad its working fine for most people.

pwgustafson
12 Aug 2010, 5:19 PM
I don't see any calendar view on this...only the bars across the top and bottom, the buttons dont do anything...

blessan
12 Aug 2010, 10:47 PM
I dont think all the files are getting included. Check firebug for any errors.

blessan
12 Aug 2010, 10:47 PM
By the way do try it on firefox. My client just did that mistake. he eh

I mean DONT TRY ON FIREFOX. Only in webkit browsers.

gabrielstuff
13 Aug 2010, 3:18 AM
Hi Blessan,

I am sorry, but is there any specific configuration ? needed ?
Actually, under firefox the result is worst, i didn't get any CSS and firefox tell me :

p.contains is not a function
http://localhost/~igab/Calendar/src/ext-touch-debug.js
Line 752
Quiet awkward, isn't it ?

Under Chrome, CSS and js execute fine until clicking on demo which give an error:

demoCalendar.htmlUncaught SyntaxError: Unexpected end of input
and looking at the index.html file we get :



0 undefined
1 <html>
2 <head>
3 <title>Calendar Tester</title>
4 <link rel="stylesheet" href="src/ext-touch.css" type="text/css">
...
36 </html>


Keeping just top and bottom bar. Firefox is version 3.6.8 and chrome is 5.0.375.126

Thanks !

blessan
13 Aug 2010, 3:39 AM
Well first of all Sencha is for webkit browsers. If u just need the calendar. Just google for 'FullCalendar'. Everything is working fine for me. Anyways Let me see if I can check for errors in the weekend.

gabrielstuff
13 Aug 2010, 4:36 AM
Well first of all Sencha is for webkit browsers. If u just need the calendar. Just google for 'FullCalendar'. Everything is working fine for me. Anyways Let me see if I can check for errors in the weekend.
:) You just modified your precedent reply which is clear. I know it is webkit only, but... your precedent message was not so clear. Anyway I do not need this feature, I am just trying to help and as someone get the same display as, I guessed there were something wrong.

Anyway, thank you for your share !

G

Pete999
14 Aug 2010, 12:45 PM
loaded on Nexus One have webkit browser and same as the other user already described above : see only top and bottom blue icons but no calendar (no day numbers)..any idea what's wrong?

blessan
17 Aug 2010, 9:06 PM
I dont have an android phone to test with. If there is debug option. Check for any errors. The thing is, the calendar is actually Jquery. Not really optimized for the phone. Since Extjs wont mix with Sencha Touch, I cant try the calendar component of Extjs or I think that would be easier and better. There are problems like event clashes of scrolling and click events that I know of. To fix that I will have to correct the code of Fullcalendar. To be frank, its kinda hard for me and takes time. But ill try. If u folks can make fixes for the problems u find, please post the code. It will help everyone.

dontbugme
18 Apr 2011, 12:28 PM
Thanks alot - looks like it works perfectly fine (on chrome). Ill have yet to try it on actual mobile devices tho)

nucce
21 Apr 2011, 12:51 AM
Hi !
Thank you for sharing, unfortunately, I have an error when launching your app.

The app is located at

http://localhost/~igab/Calendar/demoCalendar.html

When running from chrome I have no error until I click on viewdemo button.
Then the panel slides and the month is being displayed with the bottom toolbar and top toolbar showed.

But no days or week display.

In the consol I have the following error :


Uncaught SyntaxError: Unexpected end of input demoCalendar.html

And then if I decide to click on Month day or week, the Month title turn off and nothing happen.

Thank you !

I've the same problem, maybe some files are missed in the zip file... anyway thanks for your job! ;)

aeaem
30 May 2011, 4:03 AM
Actually, you can't visualize the app in simple webkit because demonstration's events are loaded from a php file. You have to use a software like MAMP to be able to manage php files locally... Once this kind of software installed, you're able to to load correctly the demonstration through the localhost.

Surykat
27 Oct 2011, 11:46 PM
Anyone have a working link to download this extension?

blessan
28 Oct 2011, 12:28 AM
Here is the link to the updated version from TomAlex.

https://github.com/tomalex0/SenchaTouch-JqueryFullcalendar

mvoss
5 Nov 2011, 3:06 AM
Hi,

first of all great work! I have been playing around with this and it works great. Especially I love the swipe to change months/weeks/days. However I was wondering if you have any plans to make the swipe more visual with kind of a slide operation like the carousel component? Where the next month would slide in as you move your finger and swipe. This would be awesome!

Regards,
Markus

mvoss
5 Nov 2011, 4:00 AM
Hi,

are you planning to make this work on iPhones? The scrolling in the day and week mode donīt really work on iPhones, as shown by the screenshots

Edit: This seems to work using your version of the fullcalendar.js script. I had the same version. Have you made any modifications of this? However in the weekmode something odd is happening. The current day marking stops at 10pm. Have a look at the attached screenshot:
29048

Regards,
Markus

tomalex0
5 Nov 2011, 8:12 PM
Hi,

@mvoss
Thanks for pointing out the issues, it looks like i have fixed the issue that you specified in the image. I will have to update the core fullcalendar js file. I have not yet updated the github. Hope to update it soon
Regarding swipe effects, i haven't looked it. I may have to look deep in to jquery fullcalendar.

mvoss
6 Nov 2011, 4:35 AM
Hi,

thank you for tour quick answer. Looking forward to try the new version with the error fixed :)

Regards,
Markus

tomalex0
6 Nov 2011, 4:44 AM
@mvoss
Updated code in github.

mvoss
6 Nov 2011, 4:51 AM
thank you. It seems to be fixed now :)

Regards,
Markus

mvoss
7 Nov 2011, 3:45 AM
Hi,

I have done some more thinking about the visual swiping to change months. Could this be resolved by having three isntances og the fullCalender inside three divs in the panel. The left one - 1 month/week/day, the middle one shows the current month/week/day and the right one the next month/week/day. Only one of the should be shown at any given time. After the user swiped between them one would have to rearrange the two panels and change month/week/day in the two not shown. What do you tink?

Regards,
Markus

tomalex0
7 Nov 2011, 6:13 PM
@mvoss

Loading 3 instance of full-calendar will be bit heavy. If you looking for those slide effects in month/day/week view change. I would recommend to post some help in fullcalendar forum (i'm not sure where it is).

Meanwhile the way you specified can also be done. You may need only two instance of fullcalendar rendered in two panels which is inside a card layout. Swiping main panel will setActive(left or right) one of fullcalendar panel with view you wanted. You will also take care of things like rendering events and other things when using multiple instance.

mvoss
12 Nov 2011, 5:07 AM
I guess I will post in the fullcalendar forum for the sliding.

Another issue: when scrolled down all the way in week view on an iPhone, and then changing back to month view the scrolling of the panel is still all the way at the bottom. If the month view does not have the same height you won't see anything. I fixed this by calling:

me.scroller.scrollTo(0, false)

in your changeCalendarView function.

Regards,
Markus

rbelbin
16 Nov 2011, 11:36 AM
Excuse the newb questions, but I can't for the life of me get this working. I have the sencha touch libs downloaded, and I grabbed the latest version of the Calendar code. But for some reason I can't get the calendar to work.

I'd like to load the calendar in one of the tabs of a sencha tabbar. I get an error in the index.js file (where the code: new Ext.Panel({...
is. The error is: "Uncaught TypeError: undefined is not a function" on line 14 of index.js.

My touch libraries are one level below where the calendar code is. So I refer to them (properly) like this
../touch/resources

Is there any way to combine these 2 controls?

Thanks!

Ryan

mvoss
17 Nov 2011, 4:12 AM
Hi,

@rbelbin

you have to use the fullcalenda.js file from the github posted above, not from the fullcalendar website. I think you should be able to have the calendar in a tab. Can you post your code?

Regards,
Markus

rbelbin
17 Nov 2011, 4:44 AM
@mvoss

Hey - thanks for the reply. I basically downloaded the zip from github, changed the path to the sencha touch libraries in the index.html file and tried to load the index.html file (using their demo). And using the developer tools within Chrome I still get an error.

So my index.html file has this...

<link rel="stylesheet" href="../touch/resources/css/sencha-touch.css" type="text/css"> <link rel="stylesheet" href="fullcalendar152/fullcalendar.css" type="text/css"> <link rel="stylesheet" href="extended.css" type="text/css"> <link rel="stylesheet" href="ical.css" type="text/css"> <title>FullCalendar</title> <script type="text/javascript" src="../touch/sencha-touch-debug.js"></script> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="fullcalendar152/fullcalendar.js"></script> <script type="text/javascript" src="Ext.FullCalendar.js"></script> <script type="text/javascript" src="index.js"></script>Every other file is the exact same as the extracted files from the zip file from github.

I actually get 2 errors:
1)sencha-touch-debug.js:5418 (http://localhost:66/WebUI/lib/touch/sencha-touch-debug.js) Uncaught Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page.
2)index.js:14 (http://localhost:66/WebUI/lib/calendar/index.js) Uncaught TypeError: undefined is not a function



Line 14 is this one : new Ext.Panel({
Thanks for any help you can provide. I am a complete newb, and require a calendar that you can swipe back and forth on to change months, this is the best thing I have found, and I'd love to get this working.

rbelbin
17 Nov 2011, 5:05 AM
Ok I think I have figured it out, I was using a prerelease version of the Sencha Touch controls. 2.0 PR1. It wasn't working with that version. When I downloaded and installed the 1.1.1 version, it seems to be working.

Thanks for the reply. I am sure I will have more questions later.

mvoss
17 Nov 2011, 11:52 PM
Hi,

glad to hear you figured it out!

Markus

rbelbin
22 Nov 2011, 5:15 AM
After some help from mvoss (thanks again), and another couple posts on other forums... I managed to get the Sencha Touch-ified version of the FullCalendar to read from a C#/ASP.NET web service. To get it working I found the following posts on another forum that were helpful:
1) http://aspdotnetcodebook.blogspot.com/2010/08/how-to-use-jquery-fullcalender-in.html
(http://aspdotnetcodebook.blogspot.com/2010/08/how-to-use-jquery-fullcalender-in.html)2) http://jake1164.blogspot.com/2010/06/jquery-fullcalendar-and-aspnet.html

(http://jake1164.blogspot.com/2010/06/jquery-fullcalendar-and-aspnet.html)Following the changes they outlined, I had to make the following changes to the Sencha touch fullcalendar 1.5.2 files:
1) Ext.FullCalendar.js - changed the events array to accept items from a URL.
renderFullCalendar function
events: '/FullCalendar.asmx/EventList',

Then there were multiple changes that had to be made to the fullcalendar152\fullcalendar.js file
1) about line 852 - I changed the ajaxDefaults to be this:


var ajaxDefaults = {
cache: true,
headers: { 'Content-Type': 'application/json;charset=utf-8' }};


2) About Line 956 - I added the following function inside the _fetchEventSource(source, callback) code


//// REB -- Required for touch to access a web service...
convertJSONEventsToArray = function (a) {
// JKJ -- Required line to parse JSON back to an event and change 'StartDate' and 'EndDate' to start and end.
if (a.d)
var a = eval('(' + a.d.replace(/StartDate/g, 'start').replace(/EndDate/g, 'end') + ')');

return a;
};


3) about line 989 - In the same function _fetchEventSource(source, callback) I had to change the parameters to be an array


var endParam = firstDefined(source.endParam, options.endParam);
var params = {};
if (startParam) {
params[options.startParam] = Math.round(+rangeStart / 1000)
//data[startParam] = Math.round(+rangeStart / 1000);
}
if (endParam) {
//data[endParam] = Math.round(+rangeEnd / 1000);
params[options.endParam] = Math.round(+rangeEnd / 1000);
}
pushLoading();


4) A line under that pushLoading() call (line 999 for me) I changed the ajax call to the web service to this...



$.ajax($.extend({}, ajaxDefaults, source, {
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(params),
success: function (events) {
events = events || [];
var res = convertJSONEventsToArray(events);
applyAll(success, this, arguments);
if ($.isArray(res)) {
events = res;
}
callback(events);
},
error: function () {
applyAll(error, this, arguments);
callback();
},
complete: function () {
applyAll(complete, this, arguments);
popLoading();
}
}));


The C#/ASP.NET web service is essentially the same code that I referred to in the first link above...

The two lines that do the magic are these (in C#):


System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();return js.Serialize(eventList);


I hope this helps someone, feel free to contact me/post with comments or questions. I am still new to both Ext, and Sencha touch, so it is possible that I may have extra or unnecessary code.

Thanks again to mvoss for helping me out!

netresource
17 Feb 2012, 1:12 AM
how to fire event when click next or previous button as same dayclick event?

netresource
21 Feb 2012, 2:58 AM
Hi tomalex0 (https://github.com/tomalex0),
(https://github.com/tomalex0)I got errors when i using fullcalendarpanel in many view ( i'm using ST 1.1 MVC).
The fullcalendarpanel only render in first view. If i call another view with other fullcalendar, it can't render.
How can i fix this error?
Thanks!

mvoss
17 Nov 2012, 4:29 AM
Hi,

any plans on making this plugin work with Sencah Touch 2.0? We are looking to upgrade our project, and therefore need this to work with ST2.

Regards,
Markus

blessan
18 Nov 2012, 1:20 AM
Have you looked into Ext.ux.TouchCalendar plugin from Sencha Market?

https://market.sencha.com/users/24/extensions/17

It supports Sencha Touch 2.

mvoss
19 Nov 2012, 10:46 AM
Hi,

yes I have tried that one. But with no luck. Some of their example don't even work.. :( There seem to be some issues with their plugin. For example with events that do not span the whole day..

Markus

tomalex0
2 Dec 2012, 5:48 AM
Updated fullcalendar compatible with ST2.1.

http://www.sencha.com/forum/showthread.php?250485-Sencha-Touch-Jquery-Full-Calendar&p=917222#post917222

sendy
1 Mar 2013, 2:45 AM
Hy,I made some changes in Ext.ux.FullCalendar.js ,I want to load events from store.
renderFullCalendar : function(){
var stor=Ext.getStore('Matieres'); //My store
stor.load();
console.log(stor.getAt(0).data.start); //it works render : 2013-02-15 09:30:00
var me = this;
var date = new Date(),d = date.getDate(),m = date.getMonth(),y = date.getFullYear();
$('#'+me.getPlaceholderid()).fullCalendar({
hideHeaders : true, //new property to hide full calendar header
editable: false,
events:stor, //It doesn't work ,there is no events shown on calendar
Please how can I solve this problem

Shalitha
30 Jun 2013, 9:10 AM
I am using fullcalendar plugin. Can you pleasee tell me How do I disable time slots in Fullcalendar ??? I can color the table cell but How do I disable it :( ?