Click here to Skip to main content
11,478,896 members (65,108 online)
Click here to Skip to main content

DayPilot 4: Event Calendar/Scheduler with CSS Themes (ASP.NET)

, 5 May 2015 Apache 30.9K 1.6K 30
Rate this:
Please Sign up or sign in to vote.
DayPilot Lite 4 (Apache License 2.0) brings a new feature: full CSS styling and themes support.



DayPilot Lite 4 Scheduling Project

DayPilot Lite 4 (Apache Software License 2.0) brings a new feature: full CSS styling and themes support.

Let's explore it using a simple scheduling project.

Project features:

  • Weekly agenda scheduling using an event calendar view
  • Scheduling events for multiple resources (people)
  • Summary scheduler view with all resources
  • Event creating using a modal dialog
  • Event editing using a modal dialog

You can download this project in a Visual Studio 2012 solution.

HTML5/JavaScript Event Calendar

New (May 2015): DayPilot Lite for JavaScript (open-source) is now available for download. It includes event calendar for HTML5/JavaScript/jQuery with drag and drop support. AngularJS event calendar plugin is included.

HTML5/JavaScript Event Calendar

SQL Server Database 

SQL Server Database Schema

We will create a simple SQL Server database with the following schema:

CREATE TABLE [dbo].[Event]
  [EventName] NVARCHAR(100) NULL, 
  [EventStart] DATETIME NULL, 
  [EventEnd] DATETIME NULL, 
  [ResourceId] INT NOT NULL

CREATE TABLE [dbo].[Resource]
  [ResourceName] NVARCHAR(100) NULL

There are two tables in the database:

  • [Event] table stores events (reservations)
  • [Resource] table stores resources (people)


 LINQ to SQL Classes

We will access the database (DayPilot.mdf) using LINQ to SQL.

First, we will create the required helper classes by dragging the tables from the Server Explorer to a new DayPilot.dbml file.

Event Calendar (Agenda)

 Event Calendar (Agenda) View

The Default.aspx file will display an event calendar with an agenda for the selected person. It uses DayPilot Calendar ASP.NET control.




protected void Page_Load(object sender, EventArgs e)
  if (!IsPostBack)
    // ...

private void InitCalendar()
  DayPilotCalendar1.TimeRangeSelectedHandling = DayPilot.Web.Ui.Enums.TimeRangeSelectedHandling.JavaScript;
  DayPilotCalendar1.TimeRangeSelectedJavaScript = "create('{0}')";
  DayPilotCalendar1.EventClickHandling = DayPilot.Web.Ui.Enums.EventClickHandlingEnum.JavaScript;
  DayPilotCalendar1.EventClickJavaScript = "edit('{0}')";
  DayPilotCalendar1.StartDate = DayPilot.Utils.Week.FirstDayOfWeek();
  DayPilotCalendar1.Days = 7;
private void LoadEvents()
  int resource = Convert.ToInt32(DropDownListResources.SelectedValue);
  DayPilotCalendar1.DataSource = from e in db.Events where e.ResourceId == resource select e;
  DayPilotCalendar1.DataTextField = "EventName";
  DayPilotCalendar1.DataValueField = "EventId";
  DayPilotCalendar1.DataStartField = "EventStart";
  DayPilotCalendar1.DataEndField = "EventEnd";


 Scheduler View

The Overview.aspx page will display a scheduler view with all people displayed at once. It uses DayPilot Scheduler ASP.NET control.




protected void Page_Load(object sender, EventArgs e)
  if (!IsPostBack)
private void InitCalendar()
  DayPilotScheduler1.TimeRangeSelectedHandling = DayPilot.Web.Ui.Enums.TimeRangeSelectedHandling.JavaScript;
  DayPilotScheduler1.TimeRangeSelectedJavaScript = "create('{0}', '{1}')";
  DayPilotScheduler1.EventClickHandling = DayPilot.Web.Ui.Enums.EventClickHandlingEnum.JavaScript;
  DayPilotScheduler1.EventClickJavaScript = "edit('{0}')";
  DayPilotScheduler1.CellWidth = 40;
  DayPilotScheduler1.EventHeight = 25;
private void LoadEvents()
  DayPilotScheduler1.DataSource = from e in db.Events select e;
  DayPilotScheduler1.DataTextField = "EventName";
  DayPilotScheduler1.DataValueField = "EventId";
  DayPilotScheduler1.DataStartField = "EventStart";
  DayPilotScheduler1.DataEndField = "EventEnd";
  DayPilotScheduler1.DataResourceField = "ResourceId";
private void LoadResources()
  var res = from r in db.Resources select r;
  foreach (Resource r in res)
    DayPilotScheduler1.Resources.Add(r.ResourceName, r.ResourceId.ToString());

Event Calendar CSS Themes

This project includes three event calendar CSS themes. You can create your own theme in the online DayPilot Theme Designer.

White CSS Theme

Event Calendar White CSS Theme

Green CSS Theme

Event Calendar Green CSS Theme

Transparent CSS Theme

Event Calendar Transparent CSS Theme

Scheduler CSS Themes

This project includes three scheduler CSS themes. You can create your own theme in the online DayPilot Theme Designer

White CSS Theme

Scheduler White CSS Theme

Green CSS Theme

Scheduler Green CSS Theme

Transparent CSS Theme

Scheduler Transparent CSS Theme


See Also  




This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


About the Author

Dan Letecky

Czech Republic Czech Republic
My open-source event calendar/scheduling AJAX controls:

DayPilot for JavaScript/HTML5/jQuery
DayPilot for ASP.NET
DayPilot for MVC
DayPilot for Java

Comments and Discussions

GeneralMy vote of 4 Pin
Santhakumar Munuswamy @ Chennai9-May-15 10:38
memberSanthakumar Munuswamy @ Chennai9-May-15 10:38 
QuestionGeting error in DayPilotDC declaration Pin
Member 110605129-Sep-14 3:20
memberMember 110605129-Sep-14 3:20 
QuestionEvent Description Pin
JGeZau29-Jan-14 10:00
memberJGeZau29-Jan-14 10:00 
AnswerRe: Event Description Pin
Dan Letecky3-Feb-14 11:03
memberDan Letecky3-Feb-14 11:03 
QuestionSort resources alphabetically Pin
Member 103825351-Dec-13 21:05
memberMember 103825351-Dec-13 21:05 
AnswerRe: Sort resources alphabetically Pin
Dan Letecky1-Dec-13 21:42
memberDan Letecky1-Dec-13 21:42 
GeneralRe: Sort resources alphabetically Pin
Member 103825352-Dec-13 6:30
memberMember 103825352-Dec-13 6:30 
QuestionAgenda view not working for me Pin
Member 103825356-Nov-13 19:43
memberMember 103825356-Nov-13 19:43 
AnswerRe: Agenda view not working for me Pin
Dan Letecky6-Nov-13 21:20
memberDan Letecky6-Nov-13 21:20 
Unfortunately, I'm not able to reproduce the problem.

The agenda view (Default.aspx) starts like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="~/Web.master" %>
<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
        <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="UpdatePanelMain">

You should make sure that the <asp:DropDownList> is there and that the ClientIDMode property is set to static. You can also check the output HTML to see what is the actual id of the dropdown.
My open-source AJAX controls:
DayPilot - Calendar/Scheduling Control for ASP.NET WebForms
DayPilot for MVC - Calendar/Scheduling Control for ASP.NET MVC
DayPilot for Java - Calendar/Scheduling Control for Java

GeneralRe: Agenda view not working for me Pin
Member 103825357-Nov-13 15:34
memberMember 103825357-Nov-13 15:34 
QuestionIs it available for Visual Studio 2010 Pin
Member 1033775215-Oct-13 12:06
memberMember 1033775215-Oct-13 12:06 
AnswerRe: Is it available for Visual Studio 2010 Pin
Dan Letecky16-Oct-13 4:01
memberDan Letecky16-Oct-13 4:01 
GeneralRe: Is it available for Visual Studio 2010 Pin
Member 1033775217-Oct-13 10:18
memberMember 1033775217-Oct-13 10:18 
QuestionWhen is the Lite version coming?! Pin
MacSpudster8-Oct-13 10:42
memberMacSpudster8-Oct-13 10:42 
AnswerRe: When is the Lite version coming?! Pin
Dan Letecky8-Oct-13 11:18
memberDan Letecky8-Oct-13 11:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 5 May 2015
Article Copyright 2013 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid