Click here to Skip to main content
15,867,141 members
Articles / Web Development / HTML

DayPilot Scheduler Control for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.91/5 (54 votes)
20 Jan 2016Apache4 min read 305.1K   8K   276   36
Flexible open-source scheduler control (resource booking, project management, timeline and free/busy visualization, Gantt)

DayPilot Scheduler for ASP.NET

Live Demos

Features

Main features:

  • Simple and clean look
  • Multiple resources on the Y axis
  • Customizable time scale on the X axis (one cell = 1 minute, 1 hour, 1 day, 1 week ...)
  • Highlights business hours (customizable color)
  • Automatically handles concurrent events
  • Customizable event box (text, size, background color, duration bar...)
  • Customizable fonts and colors

Database connectivity:

  • DataSource and DataSourceID properties supported
  • SqlDataSource
  • XmlDataSource
  • DataTable
  • DataSet
  • ArrayList
  • and other sources...

Event handling:

  • Free time slot click event (automatic PostBack or manual JavaScript handling)
  • Calendar event click event (automatic PostBack or manual JavaScript handling)

Licensing:

  • Open-source (Apache License 2.0)

Compatibility:

  • Internet Explorer 9
  • Internet Explorer 10
  • Internet Explorer 11
  • Edge (the latest version)
  • Firefox (the latest version)
  • Opera (the latest version)
  • Safari (the latest version)
  • Chrome (the latest version)

Background Information

DayPilot Scheduler reuses the event arranging algorithms introduced in the DayPilot Calendar control (Outlook-like day and week view calendar/scheduler):

Open-Source Event Calendar for ASP.NET

DayPilot Calendar detects blocks of overlapping events so they could be displayed properly. The width of each event box is adjusted according to the number of concurrent events:

Calendar Overlapping Events

DayPilot Scheduler uses the same arranging algorithm but the layout is different:

  • The Scheduler shows the time on the X axis.
  • Event box height is fixed.
  • Concurrent events are handled by increasing the row height, not by shrinking the event box.

Scheduler Overlapping Events

This reduces the concurrency problem: The increasing number of concurrent events doesn't reduce readability.

See Also

Minimal Setup Sample

XML
<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  DataSourceID="SqlDataSource1"
  DataStartField="start" 
  DataEndField="end" 
  DataTextField="name" 
  DataValueField="id" 
  DataResourceField="resource" 
  StartDate="2009-01-01"
  CellDuration="60" 
  Days="1" >
    <Resources> 
      <DayPilot:Resource Name="Room A" Value="A" /> 
      <DayPilot:Resource Name="Room B" Value="B" /> 
      <DayPilot:Resource Name="Room C" Value="C" /> 
    </Resources> 
</DayPilot:DayPilotScheduler>  

The first group properties defines the data binding:

  • DataSourceID
  • DataStartField (starting DateTime)
  • DateEndField (ending DateTime)
  • DataTextField (event text)
  • DataValueField (event id)
  • DataResourceField (resource id)

DataResourceField is important - the values from this column will be matched with the resource IDs (Resource.Value).

The second group defines the time range and scale:

  • StartDate (first visible day)
  • Days (number of visible days)
  • CellDuration (cell duration in minutes)

And finally, it's necessary to define the resources (rows):

  • Resource.Name (row name)
  • Resource.Value (row ID)

Usage Examples

Daily Scheduler

Daily Scheduler Control for ASP.NET

Settings:

C#
Days="1" 
CellDuration="60"

StartDate is set manually in the code behind:

C#
DayPilotScheduler1.StartDate = DateTime.Today; 

Weekly Scheduler

Weekly Scheduler Control for ASP.NET

Settings:

C#
Days="7"
CellDuration="1440" 

The first day of week is calculated using Week.FirstDayOfWeek helper:

C#
DayPilotScheduler1.StartDate = Week.FirstDayOfWeek(DateTime.Today, DayOfWeek.Monday);

Monthly Scheduler

Monthly Scheduler Control for ASP.NET

Settings:

C#
CellDuration="1440" 

In this case, it's necessary to set the Days property manually:

C#
DayPilotScheduler1.StartDate = 
    new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1); 
DayPilotScheduler1.Days = 
    DateTime.DaysInMonth(DateTime.Today.Year, DateTime.Today.Month); 

Free/Busy Visualisation

Image 8

This view doesn't show event name (DataTextField is bound to an empty column).

Settings:

C#
DurationBarVisible="false"
EventBackColor="#4A71CE" 

Timeline Visualisation

Timeline Control for ASP.NET

In the timeline view, the resources are replaced with events in the row headers. There is always just one event per row.

Settings:

C#
DurationBarVisible="false"
EventBackColor="#CA2A50" 

Gantt

Gantt Chart for ASP.NET

DayPilot Scheduler can be switched to Gantt Chart mode using a single switch:

ViewType="Gantt"

In the Gantt mode, it will display each event in a separate row. See also a detailed explanation in the Gantt Chart Tutorial [code.daypilot.org].

CSS Themes

You can set the CSS theme using CssClassPrefix property. Several pre-built CSS themes are available. You can also browse a scheduler theme gallery or design your own theme using the online scheduler CSS 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

DayPilot Tutorials

History

License

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


Written By
Czech Republic Czech Republic
My open-source event calendar/scheduling web UI components:

DayPilot for JavaScript, Angular, React and Vue

Comments and Discussions

 
QuestionLicence Pin
Member 131601064-May-17 8:03
Member 131601064-May-17 8:03 
QuestionLicense ? Pin
George Bora21-Jan-16 20:22
George Bora21-Jan-16 20:22 
AnswerRe: License ? Pin
Dan Letecky21-Jan-16 20:29
Dan Letecky21-Jan-16 20:29 
PraiseRe: License ? Pin
George Bora21-Jan-16 21:05
George Bora21-Jan-16 21:05 
QuestionRTL support Pin
oeatek21-Jan-16 3:39
oeatek21-Jan-16 3:39 
AnswerRe: RTL support Pin
Dan Letecky21-Jan-16 20:30
Dan Letecky21-Jan-16 20:30 
QuestionYes i love web-controls Pin
Dr Gadgit18-Apr-15 7:36
Dr Gadgit18-Apr-15 7:36 
QuestionDaily Scheduler Colum Headings Pin
Member 987309317-Apr-15 7:34
Member 987309317-Apr-15 7:34 
AnswerRe: Daily Scheduler Colum Headings Pin
Dan Letecky17-Apr-15 8:44
Dan Letecky17-Apr-15 8:44 
GeneralRe: Daily Scheduler Colum Headings Pin
Member 987309317-Apr-15 9:44
Member 987309317-Apr-15 9:44 
QuestionC# Pin
Member 1062891325-Mar-14 0:53
Member 1062891325-Mar-14 0:53 
BugISO weeks and dates don't match Pin
Gustav Brock20-May-13 0:33
professionalGustav Brock20-May-13 0:33 
GeneralRe: ISO weeks and dates don't match Pin
Dan Letecky20-May-13 3:47
Dan Letecky20-May-13 3:47 
QuestionRepository I can commit changes to? Pin
Atrejoe6-Feb-13 5:31
Atrejoe6-Feb-13 5:31 
AnswerRe: Repository I can commit changes to? Pin
Dan Letecky16-May-13 23:25
Dan Letecky16-May-13 23:25 
QuestionIs there a way to select multiple rooms for an event? Pin
Member 319274921-Dec-12 10:57
Member 319274921-Dec-12 10:57 
AnswerRe: Is there a way to select multiple rooms for an event? Pin
Dan Letecky3-Feb-13 21:50
Dan Letecky3-Feb-13 21:50 
GeneralMy vote of 5 Pin
AmitGajjar17-Aug-12 5:49
professionalAmitGajjar17-Aug-12 5:49 
GeneralRe: My vote of 5 Pin
Dan Letecky17-Oct-12 0:53
Dan Letecky17-Oct-12 0:53 
GeneralMy vote of 5 Pin
Abdul Quader Mamun15-Aug-12 1:44
Abdul Quader Mamun15-Aug-12 1:44 
GeneralRe: My vote of 5 Pin
Abdul Quader Mamun15-Aug-12 1:45
Abdul Quader Mamun15-Aug-12 1:45 
QuestionDayPilot Lite - set color per event Pin
limem7-Jun-12 11:37
limem7-Jun-12 11:37 
AnswerRe: DayPilot Lite - set color per event Pin
Dan Letecky8-Jun-12 1:02
Dan Letecky8-Jun-12 1:02 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey3-Feb-12 19:42
professionalManoj Kumar Choubey3-Feb-12 19:42 
GeneralRe: My vote of 5 Pin
Dan Letecky8-Jun-12 6:34
Dan Letecky8-Jun-12 6:34 

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

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