NetTalk Central

Author Topic: FullCalendar - Full-sized Calendar jQuery Plugin: how to integrate in NT6?  (Read 11617 times)

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Hi Bruce,

I am looking for a good calendar in NT6 with month/week/day view with drag and drop.
Currently, NT6 doesn't support this completely.
I have looked at example 12 (HotDates) but it doesn't contain the "whole package".

I saw a very nice Calendar jQuery Plugin: FullCalendar.
It would be great if this plugin could be working in NT6 with my TPS files.  ;D
I think there are more NT users who are looking for a complete calendar plugin in NT6.
Please look at the following links.
Can you tell me if it's hard to support FullCalendar?

Best regards
Jeffrey

FullCalendar links:

http://arshaw.com/fullcalendar/

http://speckyboy.com/2010/05/13/50-fundamental-jquery-controls-and-rich-ui-components/

http://weblogs.asp.net/gunnarpeipman/archive/2010/02/03/using-fullcalendar-jquery-component-with-asp-net-mvc.aspx

http://www.youtube.com/watch?v=GEuHli7onQw

http://www.youtube.com/watch?v=UKUu9KJxunI

http://blog.shinetech.com/2011/08/05/building-a-shared-calendar-with-backbone-js-and-fullcalendar-a-step-by-step-tutorial/

http://thejimgaudet.com/articles/support/web/jquery-fullcalendar-example-change-bg-colorusing-jqueryui-themes/

http://www.zivtech.com/blog/fullcalendar-fully-loaded

http://www.planbox.com/blog/development/coding/full-calendar-jquery-widget-simply-awesome.html

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Hi Bruce,

I know you are very busy, but do you have any comments?  ;)

Best regards
Jeffrey

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
hmm, I did reply, but clearly the POST didn't work.

The short answer is - quite a lot of work. Nothing stops you doing it of course, but it's not exactly trivial. The control seems to be fairly tightly tied to PHP - or at least you would need to translate the PHP stuff into NetTalk. It's do-able, but not trivial.

cheers
Bruce

alex.kolaric

  • Full Member
  • ***
  • Posts: 151
  • Do it or do not, there is no try
    • View Profile
    • Email
Hi Jeffrey,

I successfully connected FullCalendar with our NT5 app using JSON where the data is in the MSSQL db. However I never got to finish all the functionality related to everything I want to have. So it is possible and I didn't find it too complicated to handle with NT, at least so far. Maybe Bruce knows more about it than I know  ;D

Here is the snapshot of integrated calendar in our NT5.

Regards,
Alex

[attachment deleted by admin]
« Last Edit: January 25, 2012, 12:50:52 PM by alex.kolaric »

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Wow, looks good!!
So you can also add, change and delete records in the calendar?
Can you give me some starting points?

I miss this calendar funtionality in NT, so that's why I was looking at "implementing" FullCalendar.

Best regards
Jeffrey

alex.kolaric

  • Full Member
  • ***
  • Posts: 151
  • Do it or do not, there is no try
    • View Profile
    • Email
Jeffrey,

you can add, chg and delete records. However I didn't finish that completely yet cause I was focused on something else.

First of all you must have one NetWebPage procedure where you have to put calendar div in the "after <body> XHTML routine:

<div id="calendar"></div>

 Within this page you have to put header scripts before </head> ... something like this:

<script type='text/javascript'>

   $(document).ready(function() {

      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();

      $('#calendar').fullCalendar({
         theme: true,
         header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
         },
         editable: true,
         events: "CalendarServer"

      });

   });

</script>
<style type='text/css'>

   body {
      margin-top: 40px;
      text-align: center;
      font-size: 14px;
      font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
      }

   #calendar {
      width: 900px;
      margin: 0 auto;
      }

</style>

To serve existing events to the calendar you must create another NetWebPage procedure which is labeled as in the script on top - please note

         events: "CalendarServer"

portion. It defines where the calendar gets its events data from. This NetWebPage is of the OTHER type and this procedure needs to return proper JSON string containing events data. It is called automatically by fullcalendar every time calendar needs redisplay. It receives calendar date range which you can use to query your DB and then build JSON string.

If you need more info I'm here.

Hope this helps.
Alex

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Thanks a lot Alex!!

Best regards
Jeffrey

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Hi Alex,

Sorry, but I have some further questions.

1. What do you mean with:
This NetWebPage is of the OTHER type

2. Do you have an example of the JSON part? What do you use for it? Is it some xml language?

I would like to show/update/delete some events from my TPS file in FullCalendar.
FullCalendar looks awesome!  ;D
Thanks!

Best regards
Jeffrey

alex.kolaric

  • Full Member
  • ***
  • Posts: 151
  • Do it or do not, there is no try
    • View Profile
    • Email
Hi Jeffrey,

1. What do you mean with:
This NetWebPage is of the OTHER type

CalendarServer procedure type is NetWebPage. In the Actions -> NetWebPage Settings on the general tab Page Type = OTHER

2. JSON is used for simple representing of objects with their properties. For more on JSON look at http://json.org/example.html. Basically you just need to format the data about events in a certain way - like this:
[
{"id":111,"title":"Event1","start":"2011-11-12 10:20:00","end":"2011-11-12 13:20:00","allDay":false,"url":"http:\/\/yahoo.com\/"},
{"id":222,"title":"Event2","start":"2011-11-20","end":"2011-11-22","url":"http:\/\/yahoo.com\/"}
]

You can see how each event is formated,

In a ProcessedCode embed of your CalendarServer you can return this stream by putting it in a packet and doing

  packetlen = len(clip(packet))

  if packetlen > 0
    p_web.ParseHTML(packet, 1, packetlen, NET:NoHeader)
    packet = ''
    packetlen = 0
  end     

This will supply your calendar with live data. In order to create your JSON string you will loop through your TPS file and get the records for the active calendar view date range. It is determined by two values passed from FullCalendar

   LOC:UnixStart = p_web.GetValue('start')
   LOC:UnixEnd   = p_web.GetValue('end')

Hope this helps,
Alex

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Thanks Alex for your comprehensive reply!  :)

This will help me a lot.

Best regards
Jeffrey

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Re: FullCalendar - Full-sized Calendar jQuery Plugin: how to integrate in NT6?
« Reply #10 on: February 05, 2012, 07:48:56 AM »
   LOC:UnixStart = p_web.GetValue('start')
   LOC:UnixEnd   = p_web.GetValue('end')

Hi Alex,

Do you know how I can convert a Unix Date to a Clarion Date?

Best regards
Jeffrey

bruce2

  • Full Member
  • ***
  • Posts: 108
    • View Profile
    • Email
Re: FullCalendar - Full-sized Calendar jQuery Plugin: how to integrate in NT6?
« Reply #11 on: February 05, 2012, 11:57:10 AM »
There's a p_web method to do it. I'll look up the method name in the morning.

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Re: FullCalendar - Full-sized Calendar jQuery Plugin: how to integrate in NT6?
« Reply #12 on: February 05, 2012, 12:41:39 PM »
There's a p_web method to do it. I'll look up the method name in the morning.

Great, thanks!

Best regards
Jeffrey

Jeffrey Kuijt

  • Full Member
  • ***
  • Posts: 142
    • View Profile
    • Email
Re: FullCalendar - Full-sized Calendar jQuery Plugin: how to integrate in NT6?
« Reply #13 on: February 05, 2012, 11:41:16 PM »
In order to create your JSON string you will loop through your TPS file and get the records for the active calendar view date range.

Hi Alex and Bruce,

I use the packet STRING to build the JSON string, but sometimes the JSON string can be very big and the packet string is at that moment too short.
So how can I dynamically return the correct sized packet string?

Best regards
Jeffrey