The idea is to use MooGenda to quickly expose your events from a json request. You can customize your event in week view and in day view.

Features:
* A javascript calendar based on MooTools.
* Read events from a JSON (like this)
* Double click on event to see the deafult event view.
* Double click on month’s day to see the default event to add memo to calendar.
* Drag and drop event in month view.
* Drag and drop and resize event in diary view.
* Every change send a request to back end, to store when and what changed in the event

On startup code reads a json like this (IMPORTANT: read the meaning of each variable to customize your MooGenda):

{    "events": [
        {
//day number
            "day": 1,
//an id
            "elNum": 1,
//a title for the event
            "title": "Lesson about Mootools",
//a complete description, it can have also html content
            "desc": "In Altedo, at <a href=\"http://www.iprov.com\">IPROV</a>, we have our course. "
//when the event starts
        	,"timeStart":"8.5",
//how long is the event
			"timeLong":"3"
		},
....
		   ]
}

A complete JSON is at the demo url: CALENDAR EVENTS’ JSON

The request has these POST parameters (for your customization):

1. month : a number (1,..12) for the month we want to retrieve events’
2. requestType :getEventDate (for clean coding purpose)

When an event is moved, resized or dragged MooGenda launch a request to an url to store the new home’s configuration choiced from the user. This service gives a JSON response like that:

{
"result":"ok"
}

or like that:

{
"result":"ko"
}

This is a response caused by these parameters:

1. day : the day number that contain our event
2. el: idCont (i.e 4Cont if id is 4) . The id of element that contain our event in diary view (week or day)
3. id: a unique number for every event
4. month: the month number that contain the day for our event (1,..,12)
5. requestType:storeEventDay (for clean coding purpose)
6. timeLong: a number that represent how long is now our event (in hours)
7. timeStart: a number that rapresent when our event starts.
CREATE A MOOGENDA INSTANCE
To create a MooGenda instance use a minimal code like that:

<div id="moogenda"></div>

			<script>

			window.addEvent('domready',function(){
	var mooGenda = new MooGenda({
							id:'thisMonth',
							dateObject:new Date(),
							where:'moogenda',
							header:'MooGenda: my MooTools based Agenda'});
	mooGenda.write();
});

			</script>

A complete option’s list:

1. id: An id for the MooGenda object,
2. dateObject: date when we want moogenda starts (default is the current day),
3. where: the id or div container for moogenda,
4. getEventUrl: an url to get events’ json: default, ‘data/getEvent.json’
5. storeEventUrl: an url to store events’ json: default, ‘data/storeEvent.json’
6. state: the view we want moogenda starts with, default is month (admitted value are key.WEEK,key.MONTH,key.DAY)
7. h_start: the starting time for agenda/diary view (default 0)
8. h_stop: the ending time for agenda/diary view (default 24)

Demo: http://www.moonkiki.com/moogenda/moogenda.html
Download: http://s5.histats.com/stats/r.php?475276&100&2&urlr=&www.moonkiki.com/moogenda/moogenda.zip
Source: http://www.moonkiki.com/moonkiki/moogenda/

Related Listings:

1. MooTools Events Calendar # calContainer – (string:defaults to null) the id of the...
2. Week Calendar using Jquery A jquery plugin providing a weekly view of calendar events....
3. Mootools Ajax Calendar (Vista-Like) Vista-like Ajax calendar is an unobtrusive, slick calendar script which...
4. Selecting Dates in Calendar Script A function that will select all dates in the currently...
5. FullCalendar – Full-sized Calendar jQuery Plugin FullCalendar is a jQuery plugin that provides a full-sized, drag...

Do you like this post?

Email: