html5-scheduler-event-versions.png

The Scheduler can display additional versions of each event. The versions will be displayed above the event box and can have custom start, end, CSS, HTML, and other properties.

The event version boxes are marked with *_event_version CSS class (e.g. "scheduler_event_version" for the default CSS theme).

Example CSS style:

.scheduler_default_event.scheduler_default_event_version .scheduler_default_event_inner {
  background-color: #cfdde8;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,	color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),	color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
}

JavaScript

Event versions are disabled by default.

Enable event versions:

dp.eventVersionsEnabled = true;

Event version properties:

dp.eventVersionHeight = 15;
dp.eventVersionMargin = 5;

Event version data:

var e = new DayPilot.Event({
    start: new DayPilot.Date("2015-03-25T00:00:00").addDays(start),
    end: new DayPilot.Date("2015-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
    id: DayPilot.guid(),
    resource: String.fromCharCode(65+i),
    text: "Event " + (i + 1),
    versions: [
        {
            start: new DayPilot.Date("2015-03-25T00:00:00").addDays(start),
            end: new DayPilot.Date("2015-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration).addDays(1),
            barHidden: true
        }
    ]
});

dp.events.add(e);

Supported version properties:

    • text
    • html
    • backColor
    • fontColor
    • borderColor
    • backImage
    • backRepeat
    • complete
    • barColor
    • barBackColor
    • barImageUrl
    • barVisible
    • htmlRight
    • htmlLeft
    • cssClass