search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Is there a way to update the calender using javascript?

Asked by Jay
12 years ago.

Hello Dan,

I was wondering if there is a way torefresh the calendar using javascript?For example:

DayPilotCalendar.refresh();

I am updating the page using javascript, and I'm assuming the calendar has a similar property to updatepanel where you are able to grab the element and call update.

Comment posted by Dan Letecky
12 years ago.
Almost correct. The function name is dpc.refreshCallBack(). You will need to handle the server-side Refresh event as well (you will do the actual data source refresh there).

Using .refreshCallBack(), you can also change the date (move forward or backward).

An example can be found in Demo/Calendar/Default.aspx.
Comment posted by Jay
12 years ago.

Hello Dan,

I see refreshCallBack() called in the source code from the example you gaveme, but when I tried to call it in javascript it gives me an error. Here is the function I'm using:

function IntervalChange(ddl)
{
var NumCells = 60/ddl.options[ddl.selectedIndex].value;
var DPC = document.getElementById("DayPilotCalendar1")
DPC.CellsPerHour = NumCells;
DPC.refreshCallBack();
}

What I'm trying to do is change the cellsPerHour property depending on the drop down provided to the user. Also, could you please provide some sample code to handle the server side events? At this point I'm not sure how to create and catch an ajax callback to the server. I really appreciate your help on this.

Answer posted by Dan Letecky
12 years ago.
I will try to explain it a little bit:

1. Accessing DayPilot controls on the client side.
Rather than using the DayPilotCalendar HTML element

var DPC = document.getElementById("DayPilotCalendar1");

you should access it through the value of ClientObjectName property. E.g. when the ASPX declaration looks like this:

<DayPilot:DayPilotCalendar .... ClientObjectName="dpc" />

you can access the client-side object as dpc, e.g. dpc.refreshCallBack().

2. Server-side event handling
The callback events don't do any action per se, they only invoke the server-side events. You should do you database and other changes in the server-side event handler explicitly. After calling DayPilotCalendar1.Update() the client-side object is updated.

For an example of the server-side part of the refresh event, look into Demo/Calendar/Default.aspx.cs (DayPilotCalendar1_Refresh() method). The Refresh method works the following way:

function IntervalChange(ddl)
{
var NumCells = 60/ddl.options[ddl.selectedIndex].value;

// first null = no StartDate change, second null = no Days change, third paramer is a custom value
dpc.refreshCallBack(null, null, NumCells);
}

protected void DayPilotCalendar1_Refresh(object sender, RefreshEventArgs e)
{
DayPilotCalendar1.CellsPerHour = Convert.ToInt32(e.Data); // this is not supported at the moment, see below
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();
}

3. Solution
But the problem here is that in the Refresh event handler, only a limited set of properties can be changed (in DayPilotCalendar, it's only StartDate and Days properties and the DataSource). All other changes are ignored.

In DayPilotScheduler, it's possible to change DataSource, StartDate, Days, CellDuration, CellGroupBy, CellWidth.

It's likely that I will support changing the similar set properties in DayPilotCalendar in one of the future releases (that would include CellsPerHour). But by that time, the best way is to use UpdatePanel from ASP.NET AJAX Extensions to change it.
Comment posted by Jay
12 years ago.
Thank you for your prompt response. I've implemented it using the updatepanel, and it works well.
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.