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

Changing HeaderDateFormat in Calendar has no affect on output

Asked by Derek Cramer
3 years ago.

I have been experimenting with the DayPilot lite version 1.5.434.0, and I have been unable to change the way the dates are rendered. I would like to have the day name displayed, but currently it only has the date displayed as "m/dd/yyyy".

This is my html helper code:
@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
BackendUrl = Url.Action("Backend", "Calendar"),
ViewType = ViewType.Days,
CssOnly = true,
Theme = "calendar_sfc",
HeightSpec = DayPilot.Web.Mvc.Enums.Calendar.HeightSpec.BusinessHours,
BusinessBeginsHour = 5,
BusinessEndsHour = 20,
//TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
//TimeRangeSelectedJavaScript = "timeRangeSelected(start, end, resource)",
HeaderDateFormat = "dddd",
StartDate = DateTime.Now.AddDays(-7),
Days = 8,
HourFontSize = "6pt",
HourWidth = 60,
CellHeight = 10,
})

When it renders and I "view source" I see this:
<script type='text/javascript'>
/* DayPilot Lite for ASP.NET MVC: 1.5.434.0 */
var v = new DayPilot.Calendar('dp');
v.api = 1;
v.borderColor = '#CED2CE';
v.businessBeginsHour = 5;
v.businessEndsHour = 20;
v.cellBackColor = 'white';
v.cellBorderColor = '#DEDFDE';
v.cellHeight = 10;
v.columnMarginRight = 5;
v.cornerBackColor = '#F3F3F9';
v.cssOnly = true;
v.durationBarVisible = true;
v.theme = 'calendar_sfc';
v.days = 8;
v.eventBackColor = '#638EDE';
v.eventBorderColor = '#2951A5';
v.eventFontFamily = 'Tahoma, Arial, Helvetica, sans-serif';
v.eventFontSize = '8pt';
v.eventFontColor = '#ffffff';
v.eventHeaderFontSize = '8pt';
v.eventHeaderFontColor = '#ffffff';
v.eventHeaderHeight = 14;
v.eventHeaderVisible = true;
v.headerFontSize = '10pt';
v.headerFontFamily = 'Tahoma, Arial, Helvetica, sans-serif';
v.headerFontColor = '#42658C';
v.headerHeight = 21;
v.heightSpec = 'BusinessHours';
v.hourHalfBorderColor = '#EBEDEB';
v.hourBorderColor = '#DEDFDE';
v.hourFontColor = '#42658C';
v.hourFontFamily = 'Tahoma, Arial, Helvetica, sans-serif';
v.hourNameBackColor = '#F3F3F9';
v.hourNameBorderColor = '#DEDFDE';
v.hourWidth = 60;
v.initScrollPos = '101';
v.loadingLabelText = 'Loading...';
v.loadingLabelVisible = true;
v.loadingLabelFontSize = '10pt';
v.loadingLabelFontFamily = 'Tahoma, Arial, Helvetica, sans-serif';
v.loadingLabelFontColor = '#ffffff';
v.loadingLabelBackColor = '#ff0000';
v.locale = 'en-us';
v.showToolTip = false;
v.startDate = '2017-07-26T08:15:03';
v.timeFormat = 'Clock12Hours';
v.viewType = 'Days';
v.width = '100%';
v.backendUrl = '/SFC/Calendar/Backend';
v.ajaxError = function(req) { if (DayPilot.Modal) { new DayPilot.Modal().showHtml(req.responseText); } else { alert('AJAX callback error (500)'); } };
v.eventClickHandling = 'Disabled';
v.eventMoveHandling = 'Disabled';
v.eventResizeHandling = 'Disabled';
v.timeRangeSelectedHandling = 'Disabled';
v.onEventClick = function(e) { ; };
v.onEventMove = function(e, newStart, newEnd) { var newColumn = newResource; ; };
v.onEventResize = function(e, newStart, newEnd) { ; };
v.onTimeRangeSelected = function(start, end, resource) { ; };
v.columns = [{"InnerHTML":"Wednesday","Start":"2017-07-26T08:15:03","Name":"Wednesday","ToolTip":null},{"InnerHTML":"Thursday","Start":"2017-07-27T08:15:03","Name":"Thursday","ToolTip":null},{"InnerHTML":"Friday","Start":"2017-07-28T08:15:03","Name":"Friday","ToolTip":null},{"InnerHTML":"Saturday","Start":"2017-07-29T08:15:03","Name":"Saturday","ToolTip":null},{"InnerHTML":"Sunday","Start":"2017-07-30T08:15:03","Name":"Sunday","ToolTip":null},{"InnerHTML":"Monday","Start":"2017-07-31T08:15:03","Name":"Monday","ToolTip":null},{"InnerHTML":"Tuesday","Start":"2017-08-01T08:15:03","Name":"Tuesday","ToolTip":null},{"InnerHTML":"Wednesday","Start":"2017-08-02T08:15:03","Name":"Wednesday","ToolTip":null}];
DayPilot.Locale.register(new DayPilot.Locale('en-us', {'dayNames':['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],'dayNamesShort':['Su','Mo','Tu','We','Th','Fr','Sa'],'monthNames':['January','February','March','April','May','June','July','August','September','October','November','December',''],'monthNamesShort':['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',''],'timePattern':'h:mm tt','datePattern':'M/d/yyyy','dateTimePattern':'M/d/yyyy h:mm tt','timeFormat':'Clock12Hours','weekStarts':0}));
v.Init();
var dp = v;
</script>

You can see that the column names are correct with the day spelled out like {"InnerHTML":"Thursday","Start":"2017-07-27T08:15:03","Name":"Thursday","ToolTip":null},

But as you can see in the attached screen shot, it is not rendering the date correctly.

I'm not sure where to go from here and any advice would be appreciated.

Thank You

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.