Problem with DayPilotCalendar hosting on server

I have modified the Google calendar example to suit needs. It runs fine on my local machine but fails on server.

The DayPilotCalendar doesn't display any events. It only displays blank calendar with the date time selected on left in the DayPilotCalendar
(it doesn't even show events on first page load)

I know the data is there as I have tested and displayed it on a gridview

I'm not sure how to debug this on server to resolve - I am not hosting software.

Thanks for help

Asked by Richard 10 months ago.

how-to asp.net

Replies

I suggest taking a look at the page HTML source. There is a JavaScript block that initialized DayPilotCalendar. It looks like this:

<script type='text/javascript'>
/* DayPilotPro: 6.5.2299.0 */
function dpc1_Init() {
var v = new DayPilot.Calendar('ctl00_ContentPlaceHolder1_DayPilotCalendar1');
v.allDayEnd = 'DateTime';
...

You should fine a line that starts with v.events:

v.events = [ ... ]

This is the initial list of events that will be displayed on the first page load.

The subsequent callback updates can be checked using Firefox + Firebug, IE + Fiddler, or Chrome (use Developer tools, Ctrl+Shift+I).

You should check the server response, it's a JSON string and you should be able to find Events array there.

You should also check if there is any JavaScript error during the initial page load or during callbacks (use Firebug or Chrome JavaScript console).

Answer posted by Dan Letecky [DayPilot] 10 months ago.

Dan,
Thanks for the help; unfortunately I cannot find this section (neither in the local or server version). There are some others, though, so I'll include them. Note page doesn't use master page.

I have attached the rendered HTML here (taken some stuff like view state out). There are no javascript errors.

I ran fiddler, it gives not much extra. Strangely there is a request to my Exchange server each time I click link on the calendar which I don't understand at all , especially as the Exchange email page isn't open
Thanks again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</title><link type="text/css" href="../layout.css" rel="stylesheet" /><link type="text/css" href="../themes.css" rel="stylesheet" /><link type="text/css" href="../elements.css" rel="stylesheet" />

function afterRender(data) {
alert("After render...")
if (data) {
alert("Within if ");
var text = data.message ? (data.message + " (id " + data.id + ")") : data;
//dpc1.message(text, 1000, "#000000", "#ffb401"); //#ff9525
//dpc1.message(text, 1000, "#ffffff", "#1f3f7d"); //#ff9525
//dpc1.message(text, 1000, "#ffffff", "#000000"); //#ff9525, #c00000
var img = "<img src='../media/ajax-loader-black.gif' />";
//dpc1.message(text, 1000, "#ffffff", "#dc143c", 5000); //#ff9525, #c00000
dpc1.message(text, 1000, "#333333", "#fabd54", 5000); //#ff9525, #c00000
}
alert("End of afterRender()");
}

function createEvent(start, end, resource) {
alert("create Event");
var modal = new DayPilot.Modal();
modal.top = 60;
modal.width = 700;
modal.opacity = 0;
modal.border = "1px solid #d0d0d0";
modal.closed = function() {
if (this.result == "OK") {
alert("Clicked OK!");
dpc1.commandCallBack('refresh');
}
dpc1.clearSelection();
};

modal.height = 450;
modal.showUrl("New2.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable());
}

</script>

</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/.............." />
</div>

</div>
<br />
<br />
<div style="height: 20px">
</div>
</td>
<td valign="top">
<div id="DayPilotCalendar1">

</div>

<br />

WebForm_InitCallback();//]]>
</script>
<script type='text/javascript'>
/* DayPilotPro: 6.4.2265.1 /
function DayPilotNavigator1_Init() {
var v = new DayPilot.Navigator('DayPilotNavigator1');
v.bound = 'dpc1';
v.cellHeight = 20;
v.cellWidth = 20;
v.clientName = 'DayPilotNavigator1';
v.command = 'navigate';
v.cssClassPrefix = 'navigator_blue_';
v.dayNames = ["Su","Mo","Tu","We","Th","Fr","Sa"];
v.items = {"2011-09-19T00:00:00":1,"2011-08-30T00:00:00":1,"2011-07-18T00:00:00":1,"2011-06-09T00:00:00":1,"2011-06-20T00:00:00":1,"2011-09-15T00:00:00":1,"2011-08-31T00:00:00":1,"2011-09-28T00:00:00":1,"2011-08-22T00:00:00":1,"2011-08-26T00:00:00":1,"2011-09-02T00:00:00":1,"2011-10-07T00:00:00":1,"2011-08-25T00:00:00":1,"2011-05-09T00:00:00":1,"2011-09-23T00:00:00":1,"2011-09-27T00:00:00":1};
v.month = 7;
v.monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December",""];
v.uniqueID = 'DayPilotNavigator1';
v.selectMode = 'week';
v.selectionStart = new DayPilot.Date('2011-07-18T00:00:00');
v.selectionEnd = new DayPilot.Date('2011-07-24T00:00:00');
v.showMonths = 4;
v.showWeekNumbers = false;
v.skipMonths = 1;
v.titleHeight = 20;
v.dayHeaderHeight = 20;
v.weekStarts = 1;
v.weekNumberAlgorithm = 'Auto';
v.year = 2011;
v.callbackError = function(result, context) { alert('An exception was thrown in the server-side event handler:\n\n' + result.substring(result.indexOf('$$$')+3)); };
v.timeRangeSelectedHandling = 'Bind';
v.timeRangeSelectedCustom = function(start, end) {alert(start.toString() + '\n' + end.toString());};
v.visibleRangeChangedHandling = 'CallBack';
v.visibleRangeChangedCustom = function(start, end) {alert(start.toString() + '\n' + end.toString());};
v.Init();
return v;
}
var DayPilotNavigator1 = DayPilotNavigator1_Init();
</script>
<script type='text/javascript'>
/ DayPilotPro: 6.4.2265.1 /
function dpc1_Init() {
var v = new DayPilot.Calendar('DayPilotCalendar1');
v.allDayEnd = 'DateTime';
v.allDayEventBorderColor = 'Transparent';
v.allDayEventFontFamily = 'Tahoma';
v.allDayEventFontSize = '8pt';
v.allDayEventFontColor = 'White';
v.allDayEventHeight = 16;
v.allowEventOverlap = true;
v.autoRefreshCommand = 'refresh';
v.autoRefreshEnabled = false;
v.autoRefreshInterval = 60;
v.autoRefreshMaxCount = 20;
v.borderColor = '#CED2CE';
v.businessBeginsHour = 9;
v.businessEndsHour = 16;
v.clientName = 'dpc1';
v.cellBackColor = 'White';
v.cellBackColorNonBusiness = 'White';
v.cellBorderColor = '#DEDFDE';
v.cellHeight = 20;
v.cellDuration = 15;
v.columnMarginRight = 5;
v.cssClassPrefix = null;
v.deleteImageUrl = '/WebResource.axd?d=EV73vkaRUGN6mGZ7DITfhzRErwxeOakj5IwBLlI5Hv3dlzRc6XdQykqkgM_vzxs4EvcnkaBgX_dElQWkNtO4e5rSe-J9_LTiWsScbImzawegxgbhIA-ZM6e6nvrnamaIn3sKTg2&t=634464199013384531';
v.scrollDownUrl = '/WebResource.axd?d=7xAzM1_SAD1-b5PuKBIN7Si2m4Vep5kO9_TZ0O44SZaOMnWrMOzMKaChoxeLyf2KuDAFNKAAHoUiYxWPfznhUMd8Z6J0MmbZCs-j_m5Ds59PVeaI0&t=634464199013384531';
v.scrollUpUrl = '/WebResource.axd?d=KvwZ-MzJoX1XXIDgFV_MuveJ1v_8rLpjNrFFbQpJQFKBhuXlsfToAiOJbS18O8x31K5zrRTY0SmiZ31Rhkrz8pgJGt2W6nC4zrznH0ew02wbANr00&t=634464199013384531';
v.dayBeginsHour = 0;
v.days = 5;
v.durationBarColor = 'Blue';
v.durationBarVisible = false;
v.durationBarWidth = 5;
v.durationBarImageUrl = null;
v.eventArrangement = 'Cascade';
v.eventBackColor = '#638EDE';
v.eventBorderColor = '#2951A5';
v.eventFontFamily = 'Tahoma,Verdana,Sans-serif';
v.eventFontSize = '8pt';
v.eventFontColor = 'White';
v.eventHeaderFontSize = '8pt';
v.eventHeaderFontColor = 'White';
v.eventHeaderHeight = 14;
v.eventHeaderVisible = true;
v.eventSelectColor = 'Blue';
v.headerFontSize = '10pt';
v.headerFontFamily = 'Tahoma';
v.headerFontColor = '#42658C';
v.headerHeight = 21;
v.headerLevels = 1;
v.height = 300;
v.heightSpec = 'BusinessHoursNoScroll';
v.hourHalfBorderColor = '#EBEDEB';
v.hourBorderColor = '#DEDFDE';
v.hourFontColor = '#42658C';
v.hourFontFamily = 'Tahoma';
v.hourFontSize = '16pt';
v.hourNameBackColor = '#F3F3F9';
v.hourNameBorderColor = '#DEDFDE';
v.hourWidth = 45;
v.initScrollPos = 'null';
v.loadingLabelText = '<img src=\'../media/ajax-loader-round.gif\' />';
v.loadingLabelVisible = true;
v.loadingLabelFontSize = '10pt';
v.loadingLabelFontFamily = 'Tahoma';
v.loadingLabelFontColor = '#FFFFFF';
v.loadingLabelBackColor = '';
v.moveBy = 'Top';
v.numberFormat = '0.00';
v.roundedCorners = true;
v.rtl = true;
v.scrollLabelsVisible = false;
v.selectedColor = '#CCCCCC';
v.shadow = 'Fill';
v.showToolTip = false;
v.showAllDayEvents = true;
v.showAllDayEventStartEnd = false;
v.showHeader = true;
v.showHours = true;
v.sortDirections = [];
v.startDate = '2011-07-17T00:00:00';
v.timeFormat = 'Clock12Hours';
v.uniqueID = 'DayPilotCalendar1';
v.useEventBoxes = 'Never';
v.viewType = 'Days';
v.widthUnit = 'Percentage';
v.width = '';
v.tagFields = ["name","id"];
v.cornerHTML = '<div style=\'padding:2px; text-align:center; font-weight: bold;\'>2011</div>';
v.cornerBackColor = '#F3F3F9';
v.contextMenu = DayPilotMenu1;
v.contextMenuSelection = DayPilotMenuSelection;
v.bubble = bubble;
v.afterEventRender = function(e, div) {};
v.afterRender = function(data, isCallBack) {afterRender(data);};
v.eventClickHandling = 'Bubble';
v.onEventClick = function(e) {alert('This is a custom click handler. Double-click the event to edit its name inline.');};
v.eventDoubleClickHandling = 'Edit';
v.onEventDoubleClick = function(e) {alert('Event with id ' + e.value() + ' double-clicked.')};
v.eventHoverHandling = 'Disabled';
v.eventSelectHandling = 'CallBack';
v.onEventSelect = function(e) {alert('Event selected.')};
v.eventRightClickHandling = 'ContextMenu';
v.onEventRightClick = function(e) {alert('Event with id ' + e.value() + ' clicked.')};
v.eventDeleteHandling = 'PostBack';
v.onEventDelete = function(e) {if (confirm('Do you really want to delete ' + e.text() + ' ?')) dpc1.eventDeleteCallBack(e);};
v.headerClickHandling = 'Disabled';
v.onHeaderClick = function(c) {alert('Header with id ' + c.value + ' clicked.')};
v.eventResizeHandling = 'CallBack';
v.onEventResize = function(e, newStart, newEnd) { alert('Event with id ' + e.value() + ' was resized.');};
v.eventMoveHandling = 'CallBack';
v.onEventMove = function(e, newStart, newEnd, newResource, external, ctrl, shift) { var newColumn = newResource; var oldColumn = e.resource(); alert('Event with id ' + e.value() + ' was moved.');};
v.timeRangeSelectedHandling = 'JavaScript';
v.onTimeRangeSelected = function(start, end, column) { var resource = column; createEvent(start, end)};
v.timeRangeDoubleClickHandling = 'CallBack';
v.onTimeRangeDoubleClick = function(start, end, column) { var resource = column; alert(start.toString() + '\n' + end.toString());};
v.eventEditHandling = 'CallBack';
v.onEventEdit = function(e, newText) {alert('The text of event ' + e.value() + ' was changed to ' + newText + '.');};
v.callbackError = function(result, context) { alert('An exception was thrown in the server-side event handler:\n\n' + result.substring(result.indexOf('$$$')+3)); };
v.colors = [["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"],["White","White","White","White","#FFFFCE"]];
v.events = [{"Start":"2011-07-18T02:00:00","End":"2011-07-18T02:45:00","Resource":null,"Text":"Request for school assembly from TEST","Value":"3amcuaemgk6lvb2i5ei8053jos@google.com","RecurrentMasterId":null,"Header":"","Sort":null,"Recurrent":false,"AllDay":false,"Tag":["Request for school assembly from TEST","3amcuaemgk6lvb2i5ei8053jos@google.com"]}];
v.hours = [{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>9<span style='font-size:10px; vertical-align: super; ' unselectable='on'> AM</span></div>","Hour":9},{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>10<span style='font-size:10px; vertical-align: super; ' unselectable='on'> AM</span></div>","Hour":10},{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>11<span style='font-size:10px; vertical-align: super; ' unselectable='on'> AM</span></div>","Hour":11},{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>12<span style='font-size:10px; vertical-align: super; ' unselectable='on'> PM</span></div>","Hour":12},{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>1<span style='font-size:10px; vertical-align: super; ' unselectable='on'> PM</span></div>","Hour":13},{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>2<span style='font-size:10px; vertical-align: super; ' unselectable='on'> PM</span></div>","Hour":14},{"HTML":"<div style='padding:2px; font-family:Tahoma;font-size:16pt;color:#42658C;' unselectable='on'>3<span style='font-size:10px; vertical-align: super; ' unselectable='on'> PM</span></div>","Hour":15}];
v.columns = [{"Start":"2011-07-17T00:00:00","BackColor":"#F3F3F9","Name":"Sun, 17 Jul 2011","ToolTip":null,"InnerHTML":"Sun, 17 Jul 2011","Value":null},{"Start":"2011-07-18T00:00:00","BackColor":"#F3F3F9","Name":"Mon, 18 Jul 2011","ToolTip":null,"InnerHTML":"Mon, 18 Jul 2011","Value":null},{"Start":"2011-07-19T00:00:00","BackColor":"#F3F3F9","Name":"Tue, 19 Jul 2011","ToolTip":null,"InnerHTML":"Tue, 19 Jul 2011","Value":null},{"Start":"2011-07-20T00:00:00","BackColor":"#F3F3F9","Name":"Wed, 20 Jul 2011","ToolTip":null,"InnerHTML":"Wed, 20 Jul 2011","Value":null},{"Start":"2011-07-21T00:00:00","BackColor":"#F3F3F9","Name":"Thu, 21 Jul 2011","ToolTip":null,"InnerHTML":"Thu, 21 Jul 2011","Value":null}];
v.hashes = {"corner":"Lz9G/AvPe8CB4QEwieOVLseBZlg=","hours":"BJrStVeHFrO6zaTAydIo7ZyMHWA=","events":"bMu0qO1E60qBNcxmTvxhCcvVL0g=","colors":"J/UTrJB+oR/beKIxdS7V44o0g1A=","callBack":"CVU7b4y/C8dsp9FRPb6u8hiCTXo=","columns":"QFoUEZkYQltoB3WG+LhuBuboDPs="};
v.Init();
return v;
}
var dpc1_originalOnload = window.onload;
var dpc1 = null;
dpc1 = dpc1_Init();
</script>
<script type='text/javascript'>
/ DayPilotPro: 6.4.2265.1 /
(function () {
var v = DayPilotMenu1;
v.items = [
{text:'Delete', command: 'Delete', action: 'PostBack' }];
v.cssClassPrefix = 'menu_';
v.menuTitle = 'Event';
v.showMenuTitle = false;
v.useShadow = true;
v.zIndex = 10;
})();
</script>
<script type='text/javascript'>
/ DayPilotPro: 6.4.2265.1 */
(function () {
var v = DayPilotMenuSelection;
v.items = [
{text:'-', onclick: function() { var e = this.source; var command = this.item.command; }, command: '' },
{text:'Clean selection', onclick: function() { var e = this.source; var command = this.item.command; dpc1.clearSelection(); }, command: '' }];
v.cssClassPrefix = 'menu_';
v.menuTitle = 'Event';
v.showMenuTitle = false;
v.useShadow = true;
v.zIndex = 10;
})();
</script>
</form>
</body>
</html>

Comment posted by Richard 10 months ago.

r.e. the exchange error in Fiddler that's probably Outlook...

Comment posted by Richard 10 months ago.

It looks like there is one event in the event list:

v.events = [{"Start":"2011-07-18T02:00:00","End":"2011-07-18T02:45:00","Resource":null,"Text":"Request for school assembly from TEST","Value":"3amcuaemgk6lvb2i5ei8053jos@google.com","RecurrentMasterId":null,"Header":"","Sort":null,"Recurrent":false,"AllDay":false,"Tag":["Request for school assembly from TEST","3amcuaemgk6lvb2i5ei8053jos@google.com"]}];

It's on July 18, 2011, starting at 2am, ending at 2:45am.

You are displaying 5 days:

v.days = 5;

Starting on July 17, 2011:

v.startDate = '2011-07-17T00:00:00';

You have limited the view to business hours:

v.heightSpec = 'BusinessHoursNoScroll';

The business hours are defined as 9am - 4pm:

v.businessBeginsHour = 9;
v.businessEndsHour = 16;

The event is not visible because it's outside of the business hours. You can try to display all day using HeightSpec="BusinessHours" to make sure the event is there.

Comment posted by Dan Letecky [DayPilot] 10 months ago.

Dan,

Thanks again for help. You are helping make progress on this.

Here is the problem now, I'll explain it in detail
SUMMARY:
"The scenario...all appointments load properly on Daypilot locally but on server with same code the appointments are loaded as 7 hours before"

DETAIL:
I limited the daypilot calendar to these business hours 9am to 3pm.

All appointments in my database are between 9am and 3pm (my google calendar is the database in fact).

But none of these appointments were showing on server version, they are all showing locally.

However since enabling the scrollbar as you suggested I can view all the appointments on server version.
BUT they are different times on Daypilot calendar to the Google calendar I sync with! this is really wierd as locally all the Daypilot values match my Google Calendar (and are between 9am and 3pm).

The "July 18, 2011, starting at 2am, ending at 2:45am" shown on Daypilot is actually at 9am in my Google calendar. I couldn't view 2am to see this on the server though because of business hours. The appointment was there at 2am but I couldn't see it.

I've looked at the appointments on other weeks tabs and found all appointments on Daypilot are 7 hours less than the Google calendar values

I am really puzzled by this, perhaps you can help more.

Thank-you in advance

Comment posted by Richard 10 months ago.

found root of problem, how to fix it is different story I haven't discovered...
the difference in hours seems to be todo with server time settings.
I'm in UK. values displayed are 7 hours before time shown on google calendar /daypilot. server is
in usa. somehow I need the page to know to show the dates as GMT /BST rather than what the DateTime object which Google calendar returns ?

Comment posted by Anonymous 10 months ago.

New Reply

This reply is

a comment

an answer

Your name (optional):

Tools

E-mail notifications

Feed

DayPilot Forums

Problem with DayPilotCalendar hosting on server