如何从php / mysql为DojoX日历加载事件？

Question

I want to customize the DojoX Calendar widget ( http://dojotoolkit.org/reference-guide/1.8/dojox/calendar.html ) in order to dinamically load events from php/mysql.

I've a db table where events are stored and events, after first initialization, should be retrieved again (ajax call?) ONLY when I change calendar view, for example when I click to go to previous/next month. So my question are: Where have I to change JS code referring to Dojox Calendar example/documentation page? What kind of changes have I to do in JS code in order to call (http post or get) PHP file and getting new JSON dataset when month changes?

I've read this thread too: dojox.calendar and JsonRest - how to update?

but:

1. I need a full working example (even if minimal) with HTML, JS and PHP code
2. I couldn't post on that thread as for stackoverflow posting rules and netiquette

I think somebody has already developed this kind of solution...

I hope someone could help me, thanks!

Answer 1

Depending on how many events you have, you can just load every event into the calendar initially and no matter what month/view you scroll too, the events will be present.

How, so far as an example on how to load in events from a database backend:

Sure. here you go:

Let's assume that your php file (let's call it calendar-events.php ) returned the following event data from your mysql table in the following JSON format:

{
    "items": [
        {
            "id":"0",
            "summary":"An event in the calendar",
            "calendar":"calendar1",
            "startTime":"1351756800",
            "endTime":"1351771200"
        }
    ]
}

Now, create the store that retrieves the data:

var calendarStore = new ItemFileWriteStore({
    url: "calendar-events.php",
    clearOnClose: true,
    urlPreventCache: true 
});

Finally, set the store to the calendar and render the calendar :

calendar = new Calendar({
            store: calendarStore,
            dateInterval: "month",
            region: "center",
            roundToDay: false,
            editable: false,
            decodeDate: function(s){
                    return new Date(s * 1000);
            },
            style: "position:absolute;left:10px;top:10px;bottom:10px;right:10px;",
            columnViewProps: {
                    minHours: 0,
                    maxHours: 24
            }
    });