NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: Jeffrey Kuijt on January 20, 2012, 05:15:57 AM
-
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://arshaw.com/fullcalendar/)
http://speckyboy.com/2010/05/13/50-fundamental-jquery-controls-and-rich-ui-components/ (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://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=GEuHli7onQw)
http://www.youtube.com/watch?v=UKUu9KJxunI (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://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://thejimgaudet.com/articles/support/web/jquery-fullcalendar-example-change-bg-colorusing-jqueryui-themes/)
http://www.zivtech.com/blog/fullcalendar-fully-loaded (http://www.zivtech.com/blog/fullcalendar-fully-loaded)
http://www.planbox.com/blog/development/coding/full-calendar-jquery-widget-simply-awesome.html (http://www.planbox.com/blog/development/coding/full-calendar-jquery-widget-simply-awesome.html)
-
Hi Bruce,
I know you are very busy, but do you have any comments? ;)
Best regards
Jeffrey
-
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
-
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]
-
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
-
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
-
Thanks a lot Alex!!
Best regards
Jeffrey
-
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
-
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
-
Thanks Alex for your comprehensive reply! :)
This will help me a lot.
Best regards
Jeffrey
-
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
-
There's a p_web method to do it. I'll look up the method name in the morning.
-
There's a p_web method to do it. I'll look up the method name in the morning.
Great, thanks!
Best regards
Jeffrey
-
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