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