DayPilot Knowledge Base (New and Updated Articles)

Context menu uses no styling (only gray background)

DayPilot — Tue, 20 Dec 2011 10:05:20 +0100

The context menu was redesigned in DayPilot Pro for ASP.NET 6.1 release.

It is now completely stylable using CSS classes.
There is no default theme applied.

When upgrading from a previous version of DayPilot, the context menu will appear like this:

It is necessary to apply the default theme manually.

Applying the default theme:

Include Demo/Themes/themes.css style sheet
Include Demo/Themes/menu_default directory (menu_default directory must be in the same directory as themes.css in you project)
Set CssClassPrefix="menu_"

After applying the theme, the context menu will display correctly:

How To Set Up Overnight Shift Scheduling with DayPilot Calendar

DayPilot — Wed, 23 Nov 2011 15:20:06 +0100

DayPilot Calendar can be used for overnight shift scheduling.

Limiting the hours displayed in a column

The Calendar control is able to show up to 24 hours in a single column. You can limit the actual range using DayBeginsHour and DayEndsHour properties. This way you can show shifts that continue over midnight and end on the following day.

Properties:

DayBeginsHour
DayEndsHour

Example:

DayBeginsHour="16"
DayEndsHour="8"

Setting the default view range

In addition to setting the first and last hour of day, it is possible to define the business hours range using BusinessBeginsHour and BusinessEndsHour.

Business hours will be displayed using a different color (BackColor vs. NonBusinessBackColor properties)
When used with HeightSpec="BusinessHours" the default display range will be driven by the business hours. It is still possible to use the scrollbar to see the other hours.

Properties:

BusinessBeginsHour
BusinessEndsHour
HeightSpec

Example:

DayBeginsHour="16"
DayEndsHour="8"
BusinessBeginsHour="20"
BusinessEndsHour="5"
HeightSpec="BusinessHours"

Opening the CHM Help File: Action Canceled

DayPilot — Wed, 23 Nov 2011 14:30:15 +0100

When opening the CHM help file downloaded from DayPilot website you may see the following error message:

Action canceled

Internet Explorer was unable to link to the Web page you requested. The page might be temporarily unavailable.

Solution

It is necessary to uncheck "Always ask before opening this file" in the security dialog when opening the file. It might be necessary to do it as administrator.

How to use DayPilot Pro for MVC 3 with Razor view engine

DayPilot — Fri, 09 Sep 2011 15:51:13 +0200

DayPilot Pro for ASP.NET MVC is compatible with MVC 3 and it supports the Razor view engine.

How to use Scheduler with 100% height

DayPilot — Wed, 13 Jul 2011 16:08:43 +0200

The Scheduler height can be set to 100% using HeightSpec="Parent100Pct" option. This will set the control height to 100% of its parent element.

In order to fill the browser window, height must be specified on all parent elements, including and .

Three-pane page CSS layout example

An example of a three-pane page layout:

#header - a fixed-height header on top (height = 60px)
#left - a fixed-width header on the left (width = 200px)
#right - the main div sized automatically

HTML source:






Layout







    header



    
        left
    
    
        right

How to highight day cells in DayPilot Month using CSS

DayPilot — Thu, 16 Jun 2011 21:20:35 +0200

It is possible to assign custom CSS classes to day cells using BeforeCellRender event:

   protected void DayPilotMonth1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeCellRenderEventArgs e)
    {  
        e.CssClass = "first";
    }

This class name will be prefixed with CssClassPrefix value (if specified):

CssClassPrefix="month_"

Example

    protected void DayPilotMonth1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeCellRenderEventArgs e)
    {  
        if (e.Start.Day == 1) {
            e.CssClass = "first";
        }
    }

DayPilotMonth properties:

CssClassPrefix="month_"

CSS:

.month_first {
  font-weight: bold;
}

How to combine column visibility and cell background to show business hours in the Scheduler

DayPilot — Mon, 23 May 2011 14:33:45 +0200

If you decide to hide the non-business hours using ShowNonBusiness="false" you may realize that it's hiding too much.

It's driven by the BusinessBeginsHour and BusinessEndsHour.
It hides all cell outside of this time range.
It hides all weekends.

Usually it's necessary to show several time blocks before and after the business hours and on the weekend but still indicate that it's not a standard working time.

This can be done by adjusting the column visibility and setting custom background cell colors.

1. Enlarge the visible area for working days

Define lower BusinessBeginsHour value (5 instead of 7) and higher BusinessEndsHour (18 instead of 15).

This will show a bigger time frame each working day.

2. Show the weekends

Override BeforeTimeHeaderRender and set the column visibility for weekend time cells.

protected void DayPilotScheduler1_BeforeTimeHeaderRender(object sender, DayPilot.Web.Ui.Events.BeforeTimeHeaderRenderEventArgs e)
{
  if (e.Start.DayOfWeek == DayOfWeek.Saturday || e.Start.DayOfWeek == DayOfWeek.Sunday) {
    if (e.Start.Hour > DayPilotScheduler1.BusinessBeginsHour && e.Start.Hour < DayPilotScheduler1.BusinessEndsHour - 1) {
      e.Visible = true;
    }
  }
}

3. Indicate the real business hours using cell background color

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Start.Hour < 7) {
    e.IsBusiness = false;
  }

  if (e.End.Hour > 15) {
    e.IsBusiness = false;
  }
}

How to implement Copy & Paste in the Calendar

DayPilot — Wed, 11 May 2011 21:47:13 +0200

This sample shows how to implement a copy & paste functionality using context menu in the Calendar control.

1. Add a global variable that will hold the id of the copied event.

2. Add a "Copy" command to the event context menu (ContextMenuID).

This menu item will store the ID of the selected event in the "copied" variable.

3. Add a "Paste" command to the cell context menu (ContextMenuSelectionID):

This menu item will execute Command event on the server side, using "paste" as the command, and sending the ID of the copied event under the "id" key and the selected time start under the "start" key.

You can also clear the copied variable:

copied = null;

4. Handle the Command event on the server side. Create a new event from the copied one.

 protected void DayPilotCalendar1_Command(object sender, CommandEventArgs e)
    {
        switch (e.Command)
        {
            case "paste":
                DateTime pasteHere = (DateTime) e.Data["start"];
                string id = (string) e.Data["id"];

                // this should be replaced with a code that loads the event from a database
                DataRow dr = table.Rows.Find(id);
                if (dr != null)
                {
                    TimeSpan duration = ((DateTime) dr["end"]) - ((DateTime) dr["start"]);

                    // create a new event using the old event details
                    DataRow drNew = table.NewRow();
                    drNew["start"] = pasteHere;
                    drNew["end"] = pasteHere + duration;
                    drNew["id"] = Guid.NewGuid().ToString();
                    drNew["name"] = "Copy of " + dr["name"];

                    table.Rows.Add(drNew);
                    table.AcceptChanges();
                }
                DayPilotCalendar1.DataBind();
                DayPilotCalendar1.UpdateWithMessage("Event copied.");
                break;
        }
    }

How to improve speed of the Scheduler (when showing many events)

DayPilot — Mon, 14 Feb 2011 13:36:35 +0100

Basic Checklist

Upgrade to DayPilot Pro 6.2 SP3 or later. Versions prior to 6.2 store all events in the ViewState (see also StoreEventsInViewState property). Even if you disable the ViewState using (ViewStateEnabled property) the ViewState synchronization code is generated and sent to the client with every CallBack.
Make sure that you load only the necessary events on the server side (check you SELECT command). You should limit the query to the events between StartDate and StartDate + Days.
Turn off the ViewState for the control (EnableViewState="false"). This will not improve the rendering speed but it will reduce the data transferred with PostBacks/CallBacks.
Enable POST request compression.

Dynamic Features

The DayPilot Scheduler has special features that help showing large data sets.

Load only the events for the visible area using Dynamic Event Loading.
If you are showing many resources, try to organize them into a tree and load the tree children dynamically using Dynamic Resource Tree Loading.

How to save the exported PNG image to a file (without a web page)

DayPilot — Thu, 10 Feb 2011 09:55:20 +0100

The Scheduler image export can be used outside of ASP.NET web pages.

You need to create the control and set all the necessary properties in the code.

Example

This is a minimal example that saves the image to a file (default colors and fonts):

        DayPilotScheduler s = new DayPilotScheduler();
        s.DataStartField = "start";
        s.DataEndField = "end";
        s.DataResourceField = "resource";
        s.DataTextField = "name";
        s.DataValueField = "id";
        s.DataSource = getBackgroundData();
        s.Resources.Add("Resource A", "A");
        s.StartDate = DateTime.Today;
        s.Days = 1;
        s.DataBind();
        MemoryStream ms = s.Export(ImageFormat.Png);

        using (FileStream fs = new FileStream("c:/var/log/aspnet/output.png", FileMode.CreateNew))
        {
            ms.WriteTo(fs);
        }

        ms.Close();

Testing data generator:

    private DataTable getBackgroundData()
    {
        DataTable dt;
        dt = new DataTable();
        dt.Columns.Add("start", typeof(DateTime));
        dt.Columns.Add("end", typeof(DateTime));
        dt.Columns.Add("name", typeof(string));
        dt.Columns.Add("id", typeof(string));
        dt.Columns.Add("resource", typeof(string));

        DataRow dr;

        dr = dt.NewRow();
        dr["id"] = 1;
        dr["start"] = Convert.ToDateTime("15:00");
        dr["end"] = Convert.ToDateTime("16:00").AddDays(2);
        dr["name"] = "First";
        dr["resource"] = "A";
        dt.Rows.Add(dr);

        return dt;
    }

How to set the time cell colors using database data in the Scheduler

DayPilot — Thu, 10 Feb 2011 09:49:50 +0100

It is possible to load the data for the background time cell colors from the database.

The following example will change the cell background color to red if any event from the background DataTable is overlapping this cell.

The background cell color is set using BeforeCellRender event which is called for each time cell.

Loading the data

We will load the DataTable in Page_Load and store it in background field.

    private DataTable background;

    protected void Page_Load(object sender, EventArgs e)
    {
        initData();

        DayPilotScheduler1.StartDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
        DayPilotScheduler1.Days = DateTime.DaysInMonth(DayPilotScheduler1.StartDate.Year, DayPilotScheduler1.StartDate.Month) + DateTime.DaysInMonth(DayPilotScheduler1.StartDate.AddMonths(1).Year, DayPilotScheduler1.StartDate.AddMonths(1).Month);
        DayPilotScheduler1.Separators.Add(DateTime.Today, Color.Red);

        background = getBackgroundData();

        if (!IsPostBack)
        {
            DayPilotScheduler1.SetScrollX(DateTime.Today);
            setDataSourceAndBind();
        }
    }

Here we are using a testing data set generated using getBackgroundData(). You will probably want to replace it with data loaded from a database.

    private DataTable getBackgroundData()
    {
        DataTable dt;
        dt = new DataTable();
        dt.Columns.Add("start", typeof(DateTime));
        dt.Columns.Add("end", typeof(DateTime));
        dt.Columns.Add("name", typeof(string));
        dt.Columns.Add("id", typeof(string));
        dt.Columns.Add("resource", typeof(string));

        DataRow dr;

        dr = dt.NewRow();
        dr["id"] = 1;
        dr["start"] = Convert.ToDateTime("15:00");
        dr["end"] = Convert.ToDateTime("16:00").AddDays(2);
        dr["name"] = "First";
        dr["resource"] = "A";
        dt.Rows.Add(dr);

        return dt;
    }

Changing the color

Each time cell is compared against all events in the data set using the following condition:

if (!(e.End <= start || e.Start >= end) && e.ResourceId == resource)

This will be true if the event overlaps the cell (even partially).

    protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
    {
        foreach (DataRow dr in background.Rows)
        {
            DateTime start = (DateTime) dr["start"];
            DateTime end = (DateTime) dr["end"];
            string resource = (string) dr["resource"];

            // overlaps
            if (!(e.End <= start || e.Start >= end) && e.ResourceId == resource)
            {
                e.BackgroundColor = "red";
                return;
            }
        }
    }

How to make sure that the modal dialog is on top of all other page elements

DayPilot — Thu, 06 Jan 2011 12:57:03 +0100

Since DayPilot Pro 6.2.2185 it is possible to specify z-index of the modal popup.

DayPilot.Modal.zIndex

This number will be used for both the full-page semi-transparent background element and the dialog itself.

You should make sure that the zIndex value is higher than z-index of the other elements on the page.

This property is optional. If you don't specify z-index for any element on the page the modal popup will automatically be shown on top because it's added at the end of the DOM tree (as the last element of document.body).

Example

This example sets the z-index of the modal popup to 100.

function createEvent(start, end, resource) {
        var modal = new DayPilot.Modal();
        modal.top = 60;
        modal.width = 300;
        modal.opacity = 70;
        modal.border = "10px solid #d0d0d0";
        modal.closed = function() {
            if(this.result == "OK") {
                dps1.commandCallBack('refresh');
            }
            dps1.clearSelection();
        };
    
        modal.height = 250;
        modal.zIndex = 100;
        modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);
    }

How to show precise time in the Calendar row headers

DayPilot — Fri, 17 Dec 2010 10:43:18 +0100

The Calendar row headers can be customized using BeforeTimeHeaderRender event.

The following example renders a header with precise start time (e.g. "10:30") for each time cell.

    protected void DayPilotCalendar1_BeforeTimeHeaderRender(DayPilot.Web.Ui.Events.Calendar.BeforeTimeHeaderRenderEventArgs ea)
    {
        int cells = 60/DayPilotCalendar1.CellDuration;
        StringBuilder sb = new StringBuilder();

        sb.Append("");

        for(int i = 0; i < cells; i++ )
        {
            sb.Append("");
        }

        sb.Append("");
            sb.Append("");
            sb.Append(ea.Hour);
            sb.Append(":");
            sb.Append((i * DayPilotCalendar1.CellDuration).ToString("00"));
            sb.Append("");
            sb.Append("");

        ea.InnerHTML = sb.ToString();
    }

How to prevent event overlapping

DayPilot — Tue, 14 Dec 2010 10:42:17 +0100

At this moment it's only possible to prevent the event overlaps on the server side.

Typically, the check will need to be done in EventResize, EventMove. Depending on how you create the new events you might need to add it to TimeRangeSelected, TimeRangeMenuClick, TimeRangeDoubleClick, and Command.
You can use the following SQL select to check the new date: Testing for Overlapping Events with SQL
If the new/updated event doesn't meet the criteria, you should deny the action (don't update the DB) and notify the user using UpdateWithMessage(msg):

Event handler (.aspx.cs file):

DayPilotScheduler1.UpdateWithMessage("This action is not allowed (overlapping events)");

This technique is also demonstrated in the Hotel Room Booking Scheduler Tutorial.

How to copy events using drag&drop (Ctrl key)

DayPilot — Fri, 10 Dec 2010 08:48:34 +0100

DayPilot Pro 5.9 will be able to detect Ctrl and Shift key status during drag&drop move operation.

Ctrl and Shift key status is saved in "ctrl" and "shift" variables available to the JavaScript EventMove handler (EventMoveJavaScript).

Example 1

Client side

EventMoveJavaScript="dpc.eventMoveCallBack(e, newStart, newEnd, newResource, {ctrl: ctrl, shift: shift} )"

Server side (C#)

    protected void DayPilotScheduler1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs e)
    {
        bool shift = (bool) e.Data["shift"];
        bool ctrl = (bool) e.Data["ctrl"];

        if (ctrl) {
          // copy the event in the DB (INSERT)
        }
        else if (shift) {
          // move the event in the DB (UPDATE)
        }

        setDataSourceAndBind(); // custom method that loads the data from a DB, assigns DataSource and calls DataBind()
        DayPilotScheduler1.Update("Event moved");
    }

Server side (VB.NET)

    Protected Sub DayPilotScheduler1_EventMove(ByVal sender As Object, ByVal e As DayPilot.Web.Ui.Events.EventMoveEventArgs) Handles DayPilotScheduler1.EventMove

        Dim shift As Boolean = CType(e.Data("shift"), Boolean)
        Dim ctrl As Boolean = CType(e.Data("ctrl"), Boolean)


        If ctrl Then
            ' copy the event in the DB (INSERT)
        ElseIf shift Then
            ' move the event in the DB (UPDATE)
        End If

        setDataSourceAndBind() ' custom method that loads the data from a DB, assigns DataSource and calls DataBind() As setDataSourceAndBind()
        DayPilotScheduler1.Update("Event moved")
    End Sub

Example 2

EventMoveJavaScript="if (ctrl) yourCopyOperation(e, newStart, newEnd, newResource); else if (shift) yourMoveOperation(e, newStart, newEnd, newResource) else yourDefaultOperation(e, newStart, newEnd, newResource);"

It's necessary to handle the status properly on the server side.

Availability

Available: DayPilot Pro for ASP.NET build 5.8.1968

Controls: Calendar, Scheduler, Month

How to open a new event dialog using TimeRangeSelected event (modal.js)

DayPilot — Mon, 08 Nov 2010 11:21:24 +0100

The source code is taken from Demo/Scheduler/Default.aspx (trial package).

1. Include modal.js script

The modal.js script can be found in Demo/Js directory of the trial package.

2. Use custom (JavaScript) TimeRangeSelected handling

.aspx

TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="createEvent(e);"

createEvent() is a custom JavaScript function that will open the modal dialog.

3. Customize the dialog box (editEvent)

You can customize the dialog box by changing the createEvent() function. Here is an example implementation:

function createEvent(start, end, resource) {
  var modal = new DayPilot.Modal();
  modal.top = 60;
  modal.width = 300;
  modal.opacity = 70;
  modal.border = "10px solid #d0d0d0";
  modal.closed = function() { 
    if(this.result == "OK") { 
      dp.commandCallBack('refresh'); 
    }
    dp.clearSelection();
  };
  modal.height = 250;
  modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);
}

Where "dp" is the ClientObjectName value of the respective DayPilot control (DayPilot Calendar, DayPilot Month, DayPilot Scheduler).

4. Implement the dialog page (New.aspx)

The New.aspx page referenced by the createEvent() function can be a standard ASPX page. It will load the event details and show a form.

You will need to add the following line to the Cancel button Click handler:

    protected void ButtonCancel_Click(object sender, EventArgs e)
    {
        Modal.Close(this);
    }

And the following code to the Save button click handler:

    protected void ButtonOK_Click(object sender, EventArgs e)
    {
        // do your DB changes
        Modal.Close(this, "OK");
    }

The Modal.Close() call will close the modal window on the client side.

You can send custom data to the client using the optional second parameter ("OK" string in this case). This is helpful when you want to pass some result to the DayPilot.Modal.closed callback (see 3.Customize the dialog box (createEdit) above).

The source of the Modal class can be found in Demo/App_Code directory of the trial package.

5. Handle the 'refresh' Command

The DayPilot.Modal.closed callback used the following call to refresh the DayPilot control after an event change has been done (see 3.Customize the dialog box (eventEdit) above):

dp.commandCallBack('refresh');

It fires the Command event of the DayPilot control on the server side. You need to handle the Command event and update the event set.

An example for DayPilot Scheduler:

    protected void DayPilotScheduler1_ResourceHeaderMenuClick(object sender, DayPilot.Web.Ui.Events.Scheduler.ResourceHeaderMenuClickEventArgs e)
    {
        switch (e.Command)
        {
            case "refresh":
                  // calling a custom getData() method that loads the events from a DB
                  DayPilotScheduler1.DataSource = getData(DayPilotScheduler1.StartDate, DayPilotScheduler1.EndDate);
                  DayPilotScheduler1.DataBind();
                  DayPilotScheduler1.Update();
                break;
        }
    }

Sys.WebForms.PageRequestManagerParserErrorException on PNG export button click

DayPilot — Tue, 31 Aug 2010 21:28:55 +0200

You may get the following JavaScript error when clicking the Export button:

Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
Details: Error parsing near 'PNG

The sample Export button fires the following code.

    protected void ButtonExport_Click(object sender, EventArgs e)
    {
        DayPilotMonth1.DataSource = getData(DayPilotMonth1.VisibleStart, DayPilotMonth1.VisibleEnd, (string)DayPilotMonth1.ClientState["filter"]);
        DayPilotMonth1.DataBind();

        Response.Clear();
        Response.ContentType = "image/png";
        Response.AddHeader("Content-Disposition", "attachment;filename=print.png");
        DayPilotMonth1.Export(ImageFormat.Png).WriteTo(Response.OutputStream);
        Response.End();
    }

It modifies the Response to return the PNG image instead of the page. That will not work if the button click is handled using partial PostBack.

In order to make the button work you need to handle the button click using a full page PostBack:

Move the button outside of the UpdatePanel.
OR
Register the button using (see How do I force full post-back from a button within an UpdatePanel?).

How to customize 'Week N' string in the Scheduler header

DayPilot — Tue, 31 Aug 2010 21:11:31 +0200

The CellGroupBy = GroupByEnum.Week mode shows time columns grouped by weeks. The first header column show the week number:

You can customize this text using BeforeTimeHeaderRender event:

protected void DayPilotScheduler1_BeforeTimeHeaderRender(object sender, DayPilot.Web.Ui.Events.BeforeTimeHeaderRenderEventArgs e)
{
  if (e.IsColGroup)
  {
    e.InnerHTML = String.Format("W {0}", Week.WeekNrISO8601(e.Start));
  }
}

The Week.WeekNrISO8601() helper method calculates a week number from a given date. The ISO 8601 week numbering system assumes that weeks starts on Monday.

You can set the first day of week using WeekStarts property (specify the day of week or "Auto" for automatic detection using the current culture).

How to rebind the Navigator after an event is added to a main control

DayPilot — Tue, 24 Aug 2010 17:06:43 +0200

The DayPilotNavigator.VisibleRangeChanged event allows rebinding the free/busy information after date change.

VisibleRangeChanged is fired automatically when you change the visible months by clicking the arrow links in the Navigator header:

If you want to refresh the Navigator free/busy information manually, you can call visibleRangeChangedCallBack() on the client-side:

dpn.visibleRangeChangedCallBack();

The best place to call visibleRangeChangedCallBack() is the AfterRenderJavaScript handler.

AfterRenderJavaScript="afterRender(data)"

function afterRender(data) {
  if (data.navigatorRefresh) {
    dpn.visibleRangeChangedCallBack();
  }
}

In this case, the Navigator update will only be requested if you call Update() with the following parameters:

Hashtable data = new Hashtable();
data["navigatorRefresh"] = true;
DayPilotCalendar1.Update(data);

How to add image to an event in DayPilot Month

DayPilot — Tue, 24 Aug 2010 16:42:34 +0200

You can add images to events using BeforeEventRender event handler:

    protected void DayPilotMonth1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeEventRenderEventArgs e)
    {
        if (e.Value == "11")
        {
            e.InnerHTML = String.Format(" {0}", e.InnerHTML);
        }
    }

See also Demo/Month/CustomEventRendering.aspx.cs in the DayPilot package.

DayPilot Knowledge Base (New and Updated Articles)

Context menu uses no styling (only gray background)

How To Set Up Overnight Shift Scheduling with DayPilot Calendar

Limiting the hours displayed in a column

Setting the default view range

Opening the CHM Help File: Action Canceled

Solution

See Also

How to use DayPilot Pro for MVC 3 with Razor view engine

Index

How to use Scheduler with 100% height

Three-pane page CSS layout example

How to highight day cells in DayPilot Month using CSS

Example

How to combine column visibility and cell background to show business hours in the Scheduler

1. Enlarge the visible area for working days

2. Show the weekends

3. Indicate the real business hours using cell background color

How to implement Copy & Paste in the Calendar

How to improve speed of the Scheduler (when showing many events)

Basic Checklist

Dynamic Features

How to save the exported PNG image to a file (without a web page)

Example

How to set the time cell colors using database data in the Scheduler

Loading the data

Changing the color

How to make sure that the modal dialog is on top of all other page elements

How to show precise time in the Calendar row headers

How to prevent event overlapping

How to copy events using drag&drop (Ctrl key)

Example 1

Example 2

Availability

How to open a new event dialog using TimeRangeSelected event (modal.js)

1. Include modal.js script

2. Use custom (JavaScript) TimeRangeSelected handling

3. Customize the dialog box (editEvent)

4. Implement the dialog page (New.aspx)

5. Handle the 'refresh' Command

Sys.WebForms.PageRequestManagerParserErrorException on PNG export button click

How to customize 'Week N' string in the Scheduler header

How to rebind the Navigator after an event is added to a main control

How to add image to an event in DayPilot Month