Week agenda view

Week agenda is a combination of week and agenda views presenting a list of oncoming events inside a week.

Related sample: samples/03_extensions/24_week_agenda.html

Steps to enable

  • include
<script src="../../codebase/ext/dhtmlxscheduler_week_agenda.js" ></script>
  • add to the template
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
    ...
        <div class="dhx_cal_tab" name="week_agenda_tab" style="right:280px;"></div>

GUI details

Selected events are highlighted. If a selected event occupies several days, all related records are highlighted.

To create a new event: double click the cell of a day which will be the holder of the creating event.
To edit, delete an event: double click the desired event to open the details form.

Customization options

  • scheduler.templates.week_agenda_event_text template specifies the text of events

    scheduler.templates.week_agenda_event_text = function(start_date, end_date, event, date, position) {
        switch(position){
            case "middle": // template for days from the second to the penultimate one of multi-day events 
                return "- " + event.text;
            case "end": // template for the last day of multi-day events
                return "End: "+scheduler.templates.event_date(start_date) + " " + event.text;
            case "start": // template for the first day of multi-day events
                return "Start: "+scheduler.templates.event_date(start_date) + " " + event.text;
            default: // template for one-day events
                return scheduler.templates.event_date(start_date) + " " + event.text;
        }
    };

    where

    • start_date - the start date of the event
    • end_date - the end date of the event
    • event - the event object
    • date - the date of the event
    • position - ('start', 'middle', 'end') specifies the position of a certain day in multi-day event.
      • 'start' position defines the first day of the event.
      • 'end' position defines the last day of the event.
      • 'middle' position defines days from the second to the penultimate one.
  • scheduler.templates.week_agenda_scale_date template specifies the format of date of days' cells.

    scheduler.templates.week_agenda_scale_date = function(date) {
        return scale_date_format(date);
    };

    where

    • date - the date of the event

Configuring week agenda

Week agenda uses standard templates and configuration options. See details in the related chapters of the documentation: Configuration and Templates.