JavaScript Monthly Calendar

In the JavaScript Monthly Calendar component, you can load events using the update() method, add individual events using events.add() method, or use the events.load() helper to load the event data from a remote URL.

The structure of the event data object is described in the DayPilot.Event.data property documentation [api.daypilot.org].

Adding an Event to the Monthly Event Calendar

If you only want to add a single event to the monthly calendar, use the events.add() method.

The structure o

const e = {
  start: "2023-03-25T00:00:00",
  end: "2023-03-27T00:00:00",
  id: 1,
  text: "Event"
};

dp.events.add(e);

Event Bulk Loading

You can specify all events to be loaded using the events property of the options object when calling update(). All existing events will be replaced by the new array. The events will be stored in the events.list property.

const events = [
  {
    start: "2023-03-25T00:00:00",
    end: "2023-03-27T00:00:00",
    id: "1",
    text: "Event 1"
  },
  {
    start: "2023-03-26T12:00:00",
    end: "2023-03-27T00:00:00",
    id: "2",
    text: "Event 2"
  }
];
dp.update({
  events
});

Loading Events from an URL

The events.load() method will load the event data from a remote URL using a GET HTTP request. The remote URL must return the event data in JSON format.

dp.events.load("/api/events");

The specified URL will be automatically extended with start and end query string parameters that specify boundaries of the current view. Note that the current month view may include days from the previous and from the next month.

GET /api/events?start=2022-07-31T00:00:00&end=2022-09-04T00:00:00

By default, a GET request is used. You can switch to POST method using eventsLoadMethod property:

dp.eventsLoadMethod = "POST;

Vue Monthly Calendar

In the Vue monthly calendar, you can use one of the following methods to load the event data:

1. Use the :events attribute of the <DayPilotMonth> tag. 

<template>
  <DayPilotMonth id="dp" :config="config" :events="events" />
</template>

<script>
import {DayPilot, DayPilotMonth} from '@daypilot/daypilot-lite-vue'

export default {
  name: 'MonthlyCalendar',
  data: function() {
    return {
      events: [],
      config: {
        // ...
      },

    }
  },
  components: {
    DayPilotMonth
  },
  loadEvents() {
    const events = [
      {
        id: 1,
        start: "2023-01-04T00:00:00",
        end: "2023-01-05T00:00:00",
        text: "Meeting"
      },
    ];

    this.events = events;  
  },
  mounted() {
    this.loadEvents();
  }
}
</script>

2. You can also use the direct API and load events using the update() method:

<template>
  <DayPilotMonth id="dp" :config="config" ref="month" />
</template>

<script>
import {DayPilot, DayPilotMonth} from '@daypilot/daypilot-lite-vue'

export default {
  name: 'MonthlyCalendar',
  data: function() {
    return {
      config: {
        // ...
      }
    }
  },
  components: {
    DayPilotMonth
  },
  computed: {
    month: function () {
      return this.$refs.month.control;
    },
  },  
  loadEvents() {
    const events = [
      {
        id: 1,
        start: "2023-02-04T00:00:00",
        end: "2023-02-05T00:00:00",
        text: "Calendar Event"
      },
    ];

    this.month.update({events});
  
  },
  mounted() {
    this.loadEvents();
  }
}
</script>

ASP.NET WebForms

1. Data Source

You can assign data source directly using DataSource property (in the code only):

DayPilotMonth1.DataSource = MyDataSource;

The data source must implement IListSource, IEnumerable, or IDataSource interface. Examples:

  • XmlDataSource
  • SqlDataSource
  • ArrayList
  • DataTable
  • DataSet (first DataTable will be loaded)

After loading a DataTable from a database (or other source) you should assign it to the DataSource property:

DayPilotMonth1.DataSource = GetData(DayPilotMonth1);

GetData() loads the data from a database:

public DataTable GetAssignments(DayPilotMonth1 calendar)
{
  DataTable dt = new DataTable();
  SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [event] WHERE NOT (([end] <= @start) OR ([start] >= @end))", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
  da.SelectCommand.Parameters.AddWithValue("start", calendar.VisibleStart);
  da.SelectCommand.Parameters.AddWithValue("end", calendar.VisibleEnd);
  da.Fill(dt);
  return dt;
}

Sample table [event]

[id] [name] [start] [end]
1 Lunch 2006-06-01 12:00:00 2006-06-01 12:30:00
2 Dinner 2006-06-01 19:00:00 2006-06-01 21:00:00
3 Sleep 2006-06-01 22:00:00 2006-06-02 07:00:00
4 Breakfast 2006-06-02 07:30:00 2006-06-02 08:30:00

DataSourceID

Another option is to use a DataSource control (such as SqlDataSource) to load the data. Assign the control ID to DataSourceID property in the designer (ASPX template):

<DayPilot:DayPilotMonth 
    ID="DayPilotMonth1" 
    runat="server" 
    DataSourceID="SqlDataSource1"     
    DataTextField="name" 
    DataValueField="id" 
    DataStartField="start" 
    DataEndField="end"  >
</DayPilot:DayPilotCalendar>

2. Mapping the Fields/Properties

You need to specify which columns/fields/properties of the data source will be used:

Property Required Column type Column purpose
DataStartField Yes DateTime Event start date & time.
DataEndField Yes DateTime Event end date & time.
DataIdField Yes string Event primary key (id).
DataTextField Yes string Event name (description).
DataTagFields No string Event custom data (use it to pass additional information to event handlers). Comma separated list.

The column content will be converted to DateTime/string using Convert.ToDateTime()/Convert.ToString().

3. Data Binding

To load the data from the data source you need to call DataBind() method:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
      DataBind();
  }
}

In the event handler (when handling either PostBack or CallBack) you need to call DataBind() again if you have changed the data (e.g., after modifying the event duration in EventResize handler). If you use CallBack handling rather than PostBack, you need to call Update() method to send the changes back to the control:

protected void DayPilotMonth1_EventResize(object sender, EventResizeEventArgs e)
{
         
    // Update your data source here
    // ...
 

    DayPilotMonth1.DataBind();
    DayPilotMonth1.Update(); // necessary for handling CallBack, but won't hurt for PostBack
}

By default the event data are stored in the ViewState. It doesn't store the complete data source:

  • It selects only the values defined in DataValueField, DataTextField, DataStartField, DataEndField columns from the data source.
  • It selects only the events that are within the time range specified by StartDate and Days properties.

4. Using DataTagFields

Define the data source fields that you want to pass with the event in DataTagFields, e.g. DataTagFields="eventtype, background".

There are three places where you can access the information from the tag fields:

  1. BeforeEventRender event handler (access it as e.Tag["eventtype"] here and use it to draw custom icons in the event, custom background colors, etc.)
  2. Event-related events on the client side, e.g. in EventClickJavaScript (as e.tag("eventtype")).
  3. Event-related events on the server side, e.g. in EventClick event handler (as e.Tag["eventtype"]).

ASP.NET MVC

1. Load the data

Sample table [event]

[id] [name] [start] [end]
1 Lunch 2006-06-01 12:00:00 2006-06-01 12:30:00
2 Dinner 2006-06-01 19:00:00 2006-06-01 21:00:00
3 Sleep 2006-06-01 22:00:00 2006-06-02 07:00:00
4 Breakfast 2006-06-02 07:30:00 2006-06-02 08:30:00

Load the event data and assign the result to Events property:

public class Dpm : DayPilotMonth
{
  protected override void OnInit(InitArgs initArgs)
  {
    Events = new EventManager().FilteredData(VisibleStart, VisibleEnd).AsEnumerable();
    // ...
  }
}

This is a sample EventManager class:

public class EventManager
{
  public DataTable FilteredData(DateTime start, DateTime end)
  {
    SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end))", ConfigurationManager.ConnectionStrings["daypilot"].ConnectionString);
    da.SelectCommand.Parameters.AddWithValue("start", start);
    da.SelectCommand.Parameters.AddWithValue("end", end);

    DataTable dt = new DataTable();
    da.Fill(dt);

    return dt;
  }
}

2. Map the Columns/Fields

public class Dpm : DayPilotMonth
{
  protected override void OnInit(InitArgs initArgs)
  {
    Events = new EventManager().FilteredData(VisibleStart, VisibleEnd).AsEnumerable();

DataStartField = "start";
DataEndField = "end";
DataTextField = "name";
DataIdField = "id";
// ...
} }

3. Update()

The OnInit() is invoked using a CallBack and it is necessary to ask the scheduler to redraw the event. You can do this by calling Update() or UpdateWithMessage(). 

public class Dpm : DayPilotMonth
{
     protected override void OnInit(InitArgs initArgs)
     {
         Events = new EventManager().FilteredData(VisibleStart, VisibleEnd).AsEnumerable();

DataStartField = "start";
DataEndField = "end";
DataTextField = "name";
DataIdField = "id";
                         UpdateWithMessage("Welcome!"); } }