Skip to content
DayPilot

DayPilot Pro for ASP.NET MVC 7.3

Release date: April 16, 2013 (build 5511)

Touch Devices Support (iOS, Android)

touch circle 166

Scheduler

Calendar

Month

Tested with iOS 6 (iPad, iPhone, iPod Touch) and Android (4+) on tablets and smart phones.

Transparent Theme (Calendar)

event calendar asp net transparent theme

Demo:

Transparent Theme (Month)

monthly event calendar transparent theme

Demo:

Transparent Theme (Scheduler)

event scheduler transparent css theme

Demo:

Event "Continue" CSS Classes (Monthly Calendar)

monthly event calendar continue left

Events that continue in another row or page are marked with _event_continueleft and/or _event_continueright classes.

Demo:

Animated Event Bubble Popup

event calendar animated bubble popup

Animated property. Enabled by default. Disables Loading label.

Client-Side Event API (Calendar)

events.add()
events.remove()
events.update()
events.find()
events.findRecurrent()

Client-Side Event API (Month)

events.add()
events.remove()
events.update()
events.find()
events.findRecurrent()

Duration Bar Support in CssOnly Mode (Calendar)

event calendar duration bar cssonly mode

DurationBarVisible="true"

Navigator Orientation (Horizontal/Vertical)

Orientation = Orientation.Vertical

calendar navigator vertical

Orientation = Orientation.Horizontal

calendar navigator horizontal

Notify Event Model (Calendar, Month, Scheduler)

The "Notify" event model updates the client first and then notifies the server about the change. Compare this model with the traditional "Refresh" model where the change is first sent to the server, the server returns and updated event set and the client is refreshed.

The Notify model can be enabled for event moving and resizing using the following properties:

EventMoveHandling = EventMoveHandlingType.Notify,
EventResizeHandling = EventResizeHandlingType.Notify,

You can make custom changes using the events API:

var e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event"});
dpc.events.add(e).notify();

Multiple changes can be queued and submitted in batches:

var e;
e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event"});
dpc.events.add(e).queue();
e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event"});
dpc.events.add(e).queue();

dpc.queue.notify();

The notify() function (which you can execute on a single action or on the queue) will fire Notify event on the server side:

protected override void OnNotify(NotifyArgs e)
{
  foreach(DayPilotArgs ea in e.Queue)
  {
    if (ea is EventAddArgs)
    {
      EventAddArgs em = (EventAddArgs)ea;
      OnEventAdd(em);
    }
    else if (ea is EventMoveArgs)
    {
      EventMoveArgs em = (EventMoveArgs) ea;
      OnEventMove(em);
    }
    else if (ea is EventRemoveArgs)
    {
      EventRemoveArgs em = (EventRemoveArgs) ea;
      OnEventRemove(em);
    }
    else if (ea is EventUpdateArgs)
    {
      OnEventUpdate(sender, (EventUpdateArgs) ea);
    }
  }
  string msg = String.Format("Queue saved ({0} actions).", e.Queue.Count);
  UpdateWithMessage(msg);
}

Demo:

Client-side update (Calendar)

Call update() on the client side to immediately update the calendar after changing the properties. This used to require a server-side request using commandCallBack().

Changing Cell Height (Example)

dpc.cellHeight = 40;
dpc.update();

Client-Side Update (Month)

Call update() on the client side to immediately update the calendar after changing the properties. This used to require a server-side request using commandCallBack().

Hiding Weekends (Example)

dpm.showWeekend = false;
dpm.update();

Client-Side Update (Scheduler)

Call update() on the client side to immediately update the calendar after changing the properties. This used to require a server-side request using commandCallBack().

Changing a Date (Example)

dps.startDate = "2013-05-01";
dps.update();

Remember to have the events preloaded or to load them manually using events.add().

Hiding Weekends (Example)

dps.showWeekend = false;
dps.update();

Free/Busy Days Highlighting in Navigator

See http://doc.daypilot.org/navigator/highlighting-busy-days/.

All-Day Event "Continue" CSS Classes (Calendar)

event calendar all day events css

Single JavaScript File (daypilot-all.min.js)

The DayPilot JavaScript library is now available as a single file.

Implemented