For the Calendar component (used in index.php and doctor.php) you can adjust the scale to show 15-minute cells using cellDuration property:
var calendar= new DayPilot.Calendar("dp");
// ...
calendar.cellDuration = 15;
calendar.init();
For the Scheduler (used in manager.php), the timeline is generated in getTimeline() method. It's necessary to update getTimeline() and getTimeHeaders() methods:
HTML - a new option for "15-Min" scale:
<div class="space options">
Scale:
<label for='scale-15min'><input type="radio" value="15min" name="scale" id='scale-15min'> 15-Min</label>
<label for='scale-hours'><input type="radio" value="hours" name="scale" id='scale-hours' checked> Hours</label>
<label for='scale-shifts'><input type="radio" value="shifts" name="scale" id='scale-shifts'> Shifts</label>
<label for="business-only"><input type="checkbox" id="business-only"> Hide non-business hours</label>
</div>
getTimeline()
function getTimeline(date) {
var date = date || DayPilot.Date.today();
var start = new DayPilot.Date(date).firstDayOfMonth();
var days = start.daysInMonth();
var scale = $("input[name=scale]:checked").val();
var businessOnly = $("#business-only").prop("checked");
var morningShiftStarts = 9;
var morningShiftEnds = 13;
var afternoonShiftStarts = 14;
var afternoonShiftEnds = 18;
if (!businessOnly) {
var morningShiftStarts = 0;
var morningShiftEnds = 12;
var afternoonShiftStarts = 12;
var afternoonShiftEnds = 24;
}
var timeline = [];
var increaseMorning; // in hours
var increaseAfternoon; // in hours
switch (scale) {
case "15min":
increaseMorning = 0.25;
increaseAfternoon = 0.25;
break;
case "hours":
increaseMorning = 1;
increaseAfternoon = 1;
break;
case "shifts":
increaseMorning = morningShiftEnds - morningShiftStarts;
increaseAfternoon = afternoonShiftEnds - afternoonShiftStarts;
break;
default:
throw "Invalid scale value";
}
for (var i = 0; i < days; i++) {
var day = start.addDays(i);
for (var x = morningShiftStarts; x < morningShiftEnds; x += increaseMorning)
{
timeline.push({start: day.addHours(x), end: day.addHours(x + increaseMorning) });
}
for (var x = afternoonShiftStarts; x < afternoonShiftEnds; x += increaseAfternoon)
{
timeline.push({start: day.addHours(x), end: day.addHours(x + increaseAfternoon) });
}
}
return timeline;
}
getTimeHeaders()
function getTimeHeaders() {
var scale = $('input[name=scale]:checked').val();
switch (scale) {
case "15min":
return [ { groupBy: "Month" }, { groupBy: "Day", format: "dddd d" }, { groupBy: "Hour", format: "h tt"}, { groupBy: "Cell", format: "m"}];
break;
case "hours":
return [ { groupBy: "Month" }, { groupBy: "Day", format: "dddd d" }, { groupBy: "Hour", format: "h tt"}];
break;
case "shifts":
return [ { groupBy: "Month" }, { groupBy: "Day", format: "dddd d" }, { groupBy: "Cell", format: "tt"}];
break;
}
}