Features

  • Switching day/week/month views
  • AJAX drag and drop event creating
  • Event editing using a modal dialog
  • Automatic refresh when the view is changed
  • Includes DayPilot Pro for ASP.NET WebForms Trial
  • C# source code/VB source code
  • Visual Studio 2017 solution

License

Licensed for testing and evaluation purposes. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for ASP.NET WebForms. Buy a license.

Requirements

  • .NET Framework 4.0 or higher
  • Microsoft SQL Server 2014 (Express) or higher
  • Visual Studio 2017 or higher

Database Structure

event-calendar-asp.net-sql-schema.png

We will use a single table called [event]:

CREATE TABLE [dbo].[event](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [name] [varchar](50) NULL,
    [eventstart] [datetime] NOT NULL,
    [eventend] [datetime] NOT NULL,
  CONSTRAINT [PK_event] PRIMARY KEY CLUSTERED 
  (
      [id] ASC
  )
)

Daily Calendar

event-calendar-asp.net-daily.png

Create the day view using DayPilot ASP.NET Calendar control:

<DayPilot:DayPilotCalendar 
  ID="DayPilotCalendarDay" 
  runat="server" 
  ViewType="Day"
  ClientObjectName="dp_week"
/>

Weekly Calendar

event-calendar-asp.net-weekly.png

Create the week view using DayPilot ASP.NET Calendar control:

<DayPilot:DayPilotCalendar 
  ID="DayPilotCalendarWeek" 
  runat="server" 
  ViewType="Week"
  ClientObjectName="dp_week"
/>

Monthly Calendar

event-calendar-asp.net-monthly.png

Create the month view using DayPilot ASP.NET Monhtly Calendar control:

<DayPilot:DayPilotMonth 
  ID="DayPilotMonth1" 
  runat="server" 
  ClientObjectName="dp_month"
/>

Date Navigator

event-calendar-asp.net-navigator.png

Create the date navigator using DayPilot Navigator control.

<DayPilot:DayPilotNavigator 
  ID="DayPilotNavigator1"
  runat="server" 
  ClientObjectName="dp_navigator"
/>

Switching Toolbar

event-calendar-asp.net-toolbar.png

The toolbar is a set of plain <a> links.

<div id="toolbar">
  <a href="#" id="toolbar_day">Day</a>
  <a href="#" id="toolbar_week">Week</a>
  <a href="#" id="toolbar_month">Month</a>
</div>

We will use DayPilot.Switcher helper to bind toolbar buttons (Day, Week, Month) with the views and the Navigator.

<script type="text/javascript">
    var switcher = null;

    $(document).ready(function () {
        switcher = new DayPilot.Switcher();

        // dp_day is ClientObjectName of DayPilotCalendarDay
        switcher.addButton("toolbar_day", dp_day);  

        // dp_week is ClientObjectName of DayPilotCalendarWeek
        switcher.addButton("toolbar_week", dp_week); 

        // dp_month is ClientObjectName of DayPilotMonth1
        switcher.addButton("toolbar_month", dp_month);  

        // dp_navigator is ClientObjectName of DayPilotNavigator1
        switcher.addNavigator(dp_navigator);  

        switcher.show(dp_day);
    });

</script>

See Also

This tutorial is also available for ASP.NET MVC: