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

options to split hour

Related article: HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)
Asked by jose giraldo
5 years ago.

I really interested on your product.
I want to know if is possible split one hour in four parts (15 minutes by part)?

let me know please!

eljosegiraldo@gmail.com

Thanks!
Jose

Answer posted by Dan Letecky [DayPilot]
5 years ago.

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;
  }
}

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