Calendar based on Full Calendar

[rbelbin]

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]

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]

@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 Uncaught Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page.
2)index.js:14 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]

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]

Hi,

glad to hear you figured it out!

Markus

[rbelbin]

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
2) 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]

how to fire event when click next or previous button as same dayclick event?

[netresource]

Hi 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]

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]

Have you looked into Ext.ux.TouchCalendar plugin from Sencha Market?

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

It supports Sencha Touch 2.