### Quick Example: Client-Side Excel Export

Source: https://doc.daypilot.org/calendar/client-side-excel-export

This example demonstrates the basic setup and export process. It includes the ExcelJS library, initializes the calendar, and sets up a button to trigger the export.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>

<div id="calendar"></div>

<button id="export">Export</button>

<script>

  const calendar = new DayPilot.Calendar("calendar", {
    exceljs: ExcelJS,
    onBeforeEventExport: args => {
      args.data.backColor = "#6aa84f";
      args.data.fontColor = "#ffffff";
      args.data.borderColor = "#3d6f3d";
    },
    // ...
  });
  calendar.init();

  const app = {
      init() {
          this.bindEvents();
      },
      bindEvents() {
          document.getElementById('export').addEventListener('click', (ev) => {
              const options = {
                  mime: "application/octet-stream",
                  area: "full",
              };
              calendar.exportAs("xlsx", options).download("calendar.xlsx");
          });
      }
  };
  app.init();

</script>
```

--------------------------------

### Basic Client-Side Excel Export Setup

Source: https://doc.daypilot.org/scheduler/client-side-excel-export

Includes the ExcelJS library, initializes the scheduler with the ExcelJS reference, and sets up an export button. Use this for a quick start.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>

<div id="scheduler"></div>

<button id="export">Export</button>

<script>

  const scheduler = new DayPilot.Scheduler("scheduler", {
    exceljs: ExcelJS,
    onBeforeEventExport: args => {
      args.data.backColor = "#fafafa";
      args.data.fontColor = "#333333";
      args.data.borderColor = "#cccccc";
    },
    // ...
  });
  scheduler.init();

  const app = {
      init() {
          this.bindEvents();
      },
      bindEvents() {
          document.getElementById('export').addEventListener('click', (ev) => {
              const options = {
                  mime: "application/octet-stream",
                  area: "full",
              };
              scheduler.exportAs("xlsx", options).download("scheduler.xlsx");
          });
      }
  };
  app.init();

</script>
```

--------------------------------

### Vue 3 Gantt Chart Component Setup (Composition API)

Source: https://doc.daypilot.org/gantt/vue-js

A Vue 3 example demonstrating the setup of the DayPilot Gantt component using the Composition API. It includes reactive data for tasks and links, and configuration options.

```html
<template>
  <DayPilotGantt
    :config="config"
    :tasks="tasks"
    :links="links"
    ref="ganttRef"
  />
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { DayPilot, DayPilotGantt } from 'daypilot-pro-vue'

const startDate = DayPilot.Date.today().firstDayOfMonth()
const ganttRef = ref(null)
const gantt = computed(() => ganttRef.value?.control ?? null)
const tasks = ref([])
const links = ref([])

const config = reactive({
  columns: [
    { title: 'Task', width: 132, property: 'text' },
    { title: 'Lead', width: 76, property: 'owner' },
    { title: 'State', width: 74, property: 'status' }
  ],
  timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }],
  scale: 'Day',
  days: DayPilot.Date.today().daysInMonth(),
  startDate
})

onMounted(() => {
  tasks.value = [
    // ...
  ]
  links.value = [
    // ...
  ]
  gantt.value?.message('Welcome!')
})
</script>
```

--------------------------------

### Basic Vue Monthly Calendar Setup

Source: https://doc.daypilot.org/month/vue-js

A basic Vue component demonstrating the DayPilotMonth calendar with a specified start date.

```vue
<template>
  <DayPilotMonth :startDate="startDate" />
</template>

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

const startDate = ref('2025-05-01')

</script>
```

--------------------------------

### Configure DayPilotMonth with Start Date

Source: https://doc.daypilot.org/month/react

Specify initial properties for the `<DayPilotMonth>` tag, such as the `startDate`. This example sets the calendar to start from today's date.

```jsx
import React from 'react';
import { DayPilot, DayPilotMonth } from "@daypilot/daypilot-lite-react";

const Month = () => {
  return (
    <DayPilotMonth
      startDate={DayPilot.Date.today()}
    />
  );
};

export default Month;
```

--------------------------------

### Install DayPilot Pro Vue Gantt Chart

Source: https://doc.daypilot.org/gantt/vue-js

Install the `daypilot-pro-vue` package from npm.daypilot.org using the provided trial URL.

```bash
npm install https://npm.daypilot.org/daypilot-pro-vue/trial/xxxx.y.zzzz.tar.gz
```

--------------------------------

### Install DayPilot Lite for React

Source: https://doc.daypilot.org/calendar/react

Install the open-source version of the React Calendar component using npm.

```bash
npm install @daypilot/daypilot-lite-react
```

--------------------------------

### Install DayPilot Pro for React

Source: https://doc.daypilot.org/calendar/react

Install the commercial version of the React Calendar component from npm.daypilot.org.

```bash
npm install https://npm.daypilot.org/daypilot-pro-react/trial/2024.2.5957.tar.gz
```

--------------------------------

### Full Client-Side PNG Export Example

Source: https://doc.daypilot.org/scheduler/client-side-png-export

This example demonstrates how to set up a DayPilot Scheduler and export it to PNG, with options to choose the export area and trigger download or display.

```html
<div id="dp"></div>

<div class="space">
    Area:
    <select id="area">
        <option value="viewport">Viewport</option>
        <option value="full">Full</option>
    </select>

</div>
<div class="space">
    <a href="#" id="export-button">Export</a>
    <a href="#" id="download-button">Download</a>
</div>

<div id="export"></div>

<script type="text/javascript">

    var dp = new DayPilot.Scheduler("dp");
    
    // config ...

    dp.init();
    
    $(document).ready(function() {
        $("#export-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            var element = dp.exportAs("png", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("png", {area: area}).download();
        });
    });


</script>
```

--------------------------------

### Install DayPilot Pro React Gantt Chart (NPM)

Source: https://doc.daypilot.org/gantt/react

Use this command to install the DayPilot Pro React package via NPM. This command installs a trial version.

```bash
npm install https://npm.daypilot.org/daypilot-pro-react/trial/2024.4.6270.tar.gz --save
```

--------------------------------

### Install DayPilot Pro React Scheduler

Source: https://doc.daypilot.org/scheduler/react

Install the DayPilot Pro React Scheduler component from npm using the provided URL.

```bash
npm install https://npm.daypilot.org/daypilot-pro-react/trial/2025.3.6519.tar.gz
```

--------------------------------

### Install DayPilot Pro React Gantt Chart (Yarn)

Source: https://doc.daypilot.org/gantt/react

Use this command to install the DayPilot Pro React package via Yarn. This command installs a trial version.

```bash
yarn add https://npm.daypilot.org/daypilot-pro-react/trial/2024.4.6270.tar.gz
```

--------------------------------

### Vue Gantt Chart Component Setup (Options API)

Source: https://doc.daypilot.org/gantt/vue-js

An example of setting up the DayPilot Gantt component using the Vue Options API. It configures the chart with tasks, links, and other settings within the component's data and computed properties.

```html
<template>
  <DayPilotGantt :config="config" ref="gantt" />
</template>

<script>
import {DayPilot, DayPilotGantt} from 'daypilot-pro-vue'

export default {
  name: 'Gantt',
  data: function() {
    return {
      config: {
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
        scale: "Day",
        days: DayPilot.Date.today().daysInMonth(),
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        tasks: [ /* ... */ ],
        links: [ /* ... */ ],
        // ...
      },
    }
  },
  components: {
    DayPilotGantt
  },
  computed: {
    // DayPilot.Gantt object - https://api.daypilot.org/daypilot-gantt-class/
    gantt: function () {
      return this.$refs.gantt.control;
    }
  },
}
</script>
```

--------------------------------

### Adjust Target Position to First Available Slot

Source: https://doc.daypilot.org/scheduler/event-moving-customization

This example automatically moves an event to the next available slot if the target position is already occupied. It displays a message indicating the adjusted start time.

```javascript
onEventMoving: args => {
  const except = args.e.data;
  const events = dp.rows.find(args.resource).events.all();

  let start = args.start;
  let end = args.end;
  let overlaps = events.some(function(item) {
      return item.data !== except && DayPilot.Util.overlaps(item.start(), item.end(), start, end);
  });

  while (overlaps) {
      start = start.addDays(1);
      end = end.addDays(1);

      overlaps = events.some(function(item) {
          return item.data !== except && DayPilot.Util.overlaps(item.start(), item.end(), start, end);
      });
  }

  args.start = start;
  args.end = end;

  args.left.enabled = false;
  args.right.html = "Start automatically moved to " + args.start.toString("d MMMM, yyyy");
}
```

--------------------------------

### Install DayPilot Lite for Vue

Source: https://doc.daypilot.org/calendar/vue-js

Install the open-source DayPilot Lite for Vue package using npm.

```bash
npm install @daypilot/daypilot-lite-vue
```

--------------------------------

### Basic Client-Side Excel Export Setup

Source: https://doc.daypilot.org/month/client-side-excel-export

This snippet shows the basic HTML and JavaScript setup for enabling client-side Excel export. It includes referencing the ExcelJS library, initializing the DayPilot Month component with the exceljs property, and setting up an export button.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>

<div id="month"></div>

<button id="export">Export</button>

<script>

  const month = new DayPilot.Month("month", {
    exceljs: ExcelJS,
    onBeforeEventExport: args => {
      args.data.backColor = "#6aa84f";
      args.data.fontColor = "#ffffff";
      args.data.borderColor = "#3d6f3d";
    },
    // ...
  });
  calendar.init();

  const app = {
      init() {
          this.bindEvents();
      },
      bindEvents() {
          document.getElementById('export').addEventListener('click', (ev) => {
              const options = {
                  mime: "application/octet-stream",
                  area: "full",
              };
              calendar.exportAs("xlsx", options).download("month.xlsx");
          });
      }
  };
  app.init();

</script>
```

--------------------------------

### Install DayPilot Pro for Angular

Source: https://doc.daypilot.org/calendar/angular

Install the DayPilot Pro package from NPM. A trial version is available, and licensed customers can obtain a custom NPM link with their API key.

```bash
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2021.3.5084.tar.gz
```

--------------------------------

### Install DayPilot Pro Angular Package

Source: https://doc.daypilot.org/gantt/angular

Install the trial version of the DayPilot Pro Angular package using npm. Ensure you have the correct version number.

```bash
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz --save
```

--------------------------------

### Install DayPilot Pro for Vue

Source: https://doc.daypilot.org/calendar/vue-js

Install the DayPilot Pro for Vue package using a provided npm link for trial versions.

```bash
npm install https://npm.daypilot.org/daypilot-pro-vue/trial/2025.3.6631.tar.gz
```

--------------------------------

### Define Event Data with Versions

Source: https://doc.daypilot.org/scheduler/event-versions

Provides an example of an event object that includes a 'versions' array. Each object within the 'versions' array defines a specific version of the event with its own start and end times.

```javascript
const events = [
  {
    start: "2024-01-15T00:00:00",
    end: "2024-01-19T00:00:00",
    id: 1,
    resource: "A",
    text: "Event 1",
    versions: [
        {
            start: "2022-01-13T00:00:00",
            end: "2024-01-17T00:00:00",
            barHidden: true
        }
    ]
  }
];

scheduler.update({events});
```

--------------------------------

### Backend Controller Example (ASP.NET MVC)

Source: https://doc.daypilot.org/common/backendurl-required-asp-net-mvc

Example of an ASP.NET MVC controller action that handles DayPilot requests. Ensure the controller action returns a DayPilot scheduler instance.

```csharp
using System.Web.Mvc;
// ...

namespace MvcApplication1.Controllers
{
    public class SchedulerController : Controller
    {
        // ...
        public ActionResult Backend()
        {
            return new Dps().CallBack(this);
        }

        class Dps : DayPilotScheduler
        {
            protected override void OnInit(InitArgs ea)
            {
              // ...
            }
        }
    }
}
```

--------------------------------

### Install DayPilot Pro for Vue

Source: https://doc.daypilot.org/scheduler/vue-js

Install the DayPilot Pro for Vue package from npm.daypilot.org. Ensure you use the latest version available.

```bash
npm install https://npm.daypilot.org/daypilot-pro-vue/trial/2025.4.6763.tar.gz
```

--------------------------------

### Complete AngularJS Scheduler Example

Source: https://doc.daypilot.org/scheduler/angularjs

A comprehensive example of the DayPilot AngularJS Scheduler, demonstrating event display, data binding, UI actions like adding, moving, renaming events, and scale selection.

```html
<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-scheduler id="dp" config="config" events="events" ></daypilot-scheduler>
  <div class="space">
      New event:
      <button ng-click="add()">Add</button>
  </div>
  <div class="space">
      First event:
      <button ng-click="move()">Move</button>
      <button ng-click="rename()">Rename</button>
  </div>
  <div class="space">
      <span class="bold">Scale:</span>
      <a ng-click="scale('Day')" href="javascript:void(0)">Days</a>
      <a ng-click="scale('Week')" href="javascript:void(0)">Weeks</a>
  </div>
  <div class="space">
      <div class="bold">Selected events (click or Ctrl+click to select):</div>
      <div ng-repeat="item in selectedEvents">
          {{item.text()}} - {{item.start()}}
      </div>
  </div>
</div>
```

```javascript
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {

    $scope.config = {
        scale: "Day",
        days: 365,
        startDate: "2014-09-01",
        onEventMoved: function(args) {
            $scope.dp.message("Event moved: " + args.e.text());
        },
        eventClickHandling: "Select",
        onEventSelected: function(args) {
            $scope.selectedEvents = $scope.dp.multiselect.events();
            $scope.$apply();
        },
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Cell", format: "d" }
        ],
        resources: [
            { name: "Room B", id: "B" },
            { name: "Room C", id: "C" },
            { name: "Room D", id: "D" },
            { name: "Room E", id: "E" }
        ]
    };

    $scope.events = [
        {
            start: new DayPilot.Date("2014-09-05T00:00:00"),
            end: new DayPilot.Date("2014-09-06T00:00:00"),
            id: DayPilot.guid(),
            resource: "B",
            text: "One-Day Event"
        }
    ];

    $scope.add = function() {
        $scope.events.push(
                {
                    start: new DayPilot.Date("2014-09-05T00:00:00"),
                    end: new DayPilot.Date("2014-09-06T00:00:00"),
                    id: DayPilot.guid(),
                    resource: "B",
                    text: "One-Day Event"
                }
        );
    };

    $scope.move = function() {
        var event = $scope.events[0];
        event.start = event.start.addDays(1);
        event.end = event.end.addDays(1);
    };

    $scope.rename = function() {
        $scope.events[0].text = "New name";
    };

    $scope.scale = function(val) {
        $scope.config.scale = val;
    };

});
```

--------------------------------

### Kanban Component Configuration Example

Source: https://doc.daypilot.org/kanban/angular

An example of an Angular component class defining the 'config' object for the DayPilot Kanban component. The config object must be serializable using JSON.stringify().

```typescript
import {Component} from '@angular/core';
import {DayPilotKanbanComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-kanban-example',
  template: `<daypilot-kanban [config]="config"></daypilot-kanban>`
})
export class KanbanComponent {

  config: any = {
    // ...
  }

}
```

--------------------------------

### Initialize DayPilot Monthly Calendar with jQuery and Specific CSS

Source: https://doc.daypilot.org/month/jquery

Initializes the DayPilot Monthly Calendar with jQuery, including jQuery library and DayPilot scripts. This example specifies a different CSS class prefix and start date.

```javascript
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/month_white.css" />

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("#dp").daypilotMonth({
      cssClassPrefix: "calendar_white",
      startDate: "2013-03-01"
    });
</script>
```

--------------------------------

### Set Start Date and Update (JavaScript)

Source: https://doc.daypilot.org/month/manual-date-switching

Use this snippet to set a specific start date for the calendar and then update its display to load events for that date.

```javascript
dp.startDate = "2013-08-01";
// load events
dp.update();
```

--------------------------------

### Install DayPilot Lite for Angular

Source: https://doc.daypilot.org/calendar/angular

Install the latest DayPilot Lite Angular package from NPM. This package requires Angular 12 or higher and works with the Ivy engine.

```bash
npm install @daypilot/daypilot-lite-angular
```

--------------------------------

### JavaScript Scheduler Inline Row Editing Example

Source: https://doc.daypilot.org/scheduler/row-editing

Example demonstrating how to enable inline row editing via row clicks and display a message upon successful editing in the JavaScript Scheduler.

```javascript
const scheduler = new DayPilot.Scheduler("dp", {
  rowClickHandling: "Edit",
  onRowEdited: (args) => {
    scheduler.message("Row text changed to " + args.newText);
  }
});
scheduler.init();
```

--------------------------------

### Angular Gantt Chart Configuration Example

Source: https://doc.daypilot.org/gantt/angular

Example of an Angular component configuring the DayPilot Gantt Chart with custom time headers and scale. The config object must be JSON serializable.

```typescript
import {Component} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class GanttComponent {

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day"
  }

}
```

--------------------------------

### Client-Side SVG Export Example

Source: https://doc.daypilot.org/scheduler/client-side-svg-export

This example demonstrates how to export the DayPilot Scheduler to SVG, either the viewport or the full content, and either display it or download it. It requires the DayPilot library and jQuery.

```html
<div id="dp"></div>

<div class="space">
    Area:
    <select id="area">
        <option value="viewport">Viewport</option>
        <option value="full">Full</option>
    </select>

</div>
<div class="space">
    <a href="#" id="export-button">Export</a>
    <a href="#" id="download-button">Download</a>
</div>

<div id="export"></div>

<script type="text/javascript">

    const dp = new DayPilot.Scheduler("dp");
    
    // config ...

    dp.init();
    
    $(document).ready(function() {
        $("#export-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            var element = dp.exportAs("svg", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("svg", {area: area}).download();
        });
    });


</script>
```

--------------------------------

### Accessing DayPilotMonthComponent in Angular Component

Source: https://doc.daypilot.org/month/angular

Use @ViewChild to get a reference to the DayPilotMonthComponent in your TypeScript component. This example shows imports for both DayPilot Lite and Pro.

```typescript
import {Component, ViewChild} from '@angular/core';

// DayPilot Lite
import {DayPilotModule} from "@daypilot/daypilot-lite-angular";

// DayPilot Pro
import {DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: 'angular-monthly-calendar-example',
  template: '<daypilot-month #calendar></daypilot-month>'
})
export class MonthlyCalendarComponent {

  @ViewChild("calendar")
  calendar!: DayPilotMonthComponent;

}
```

--------------------------------

### All-Day Event Data Object (One-Day)

Source: https://doc.daypilot.org/calendar/all-day-events

Example of an all-day event data object where the 'end' date is one day after the 'start' date, resulting in a one-day event.

```json
{
    start: "2023-05-01T00:00:00",
    end: "2023-05-02T00:00:00",
    id: 3,
    text: "One-day event",
    allday: true
}
```

--------------------------------

### Basic React Calendar Component Setup

Source: https://doc.daypilot.org/calendar/react

Import and render the DayPilotCalendar component in your React application. Ensure you import the correct version (Lite or Pro) based on your installation.

```jsx
import React from 'react';

// DayPilot Lite
// import {DayPilotCalendar} from "@daypilot/daypilot-lite-react";

// DayPilot Pro
import {DayPilotCalendar} from "daypilot-pro-react";

const Calendar = () => {
    return (
        <DayPilotCalendar />
    );
}

export default Calendar;
```

--------------------------------

### Get Weekend Ranges for Event

Source: https://doc.daypilot.org/scheduler/skipping-non-business-hours

A helper function to calculate weekend date ranges within a given start and end date. Used in conjunction with event rendering.

```javascript
const app = {
    getWeekendsInRange(start, end) {
        const weekends = [];
        let current = start;

        while (current <= end) {
            if (current.getDayOfWeek() === 6) {  // 6 is Saturday
                const weekendStart = current;
                const weekendEnd = current.addDays(2);

                if (weekendEnd <= end) {
                    weekends.push({
                        start: weekendStart,
                        end: weekendEnd
                    });
                } else if (weekendStart <= end) {
                    weekends.push({
                        start: weekendStart,
                        end: weekendEnd
                    });
                }
                current = current.addDays(7);  // Move to next Saturday
            } else {
                current = current.addDays(1);
            }
        }

        return weekends;
    }
};
```

--------------------------------

### Get Selected Ranges in JavaScript

Source: https://doc.daypilot.org/scheduler/time-range-multi-selecting

Retrieve an array of currently selected ranges using the dp.multirange.get() method. The structure of each item includes start, end, resource, and calendar information.

```javascript
var ranges = dp.multirange.get();
```

--------------------------------

### Java Backend Controller Example

Source: https://doc.daypilot.org/common/backendurl-required-java

This Java servlet code provides a basic structure for handling DayPilot requests. The DpsServlet should be configured to point to the correct backend URL.

```java
package org.daypilot.demo;

// ...

public class DpsServlet extends HttpServlet {

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  }

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    new Dps().process(request, response);
  }

  public class Dps extends DayPilotScheduler {

    @Override
    public void onInit() throws Exception {
       // ...
    }

  }
}
```

--------------------------------

### Customize Event Text During Export

Source: https://doc.daypilot.org/scheduler/client-side-export

Use the onBeforeEventExport event handler to modify the text displayed for events in the exported image. This example appends the event's start date to its text.

```javascript
dp.onBeforeEventExport = function(args) {
  args.text = args.e.text() + "\n" + args.e.start().toString("M/d/yyyy");
};
```

--------------------------------

### Export Scheduler as PNG with HTTP Headers

Source: https://doc.daypilot.org/scheduler/server-side-image-export-png-jpg

This example demonstrates how to export the current Scheduler view as a PNG image and force the browser's Open/Download dialog by setting appropriate HTTP headers.

```csharp
protected void ButtonExport_Click(object sender, EventArgs e)
{
  setDataSourceAndBind();
 
  Response.Clear();
  Response.ContentType = "image/png";
  Response.AddHeader("content-disposition", "attachment;filename=print.png");
  MemoryStream img = DayPilotScheduler1.Export(ImageFormat.Png);
  img.WriteTo(Response.OutputStream);
  Response.End();
}
```

--------------------------------

### Vue Scheduler Event Alignment Configuration

Source: https://doc.daypilot.org/scheduler/exact-event-duration

Configure event alignment in Vue Scheduler by setting the 'useEventBoxes' property to 'Never'. This example shows the basic setup within a Vue component.

```html
<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        useEventBoxes: "Never",
        snapToGrid: false,
        // ...
      },
    }
  },
  components: {
    DayPilotScheduler
  },
}
</script>
```

--------------------------------

### JavaScript Gantt Chart Task Hierarchy Example

Source: https://doc.daypilot.org/gantt/task-hierarchy

Demonstrates how to define a task hierarchy in DayPilot Gantt using the 'children' property. This setup automatically treats parent tasks as groups.

```html
<div id="gantt"></div>

<script>
  // create DayPilot.Gantt object, bind it to the placeholder div
  var gantt = DayPilot.Gantt("gantt");

  // configure
  gantt.tasks.list = [
    {
      id: "G1",
      text: "Group 1",
      children: [
        {
          start: "2014-10-01",
          end: "2014-10-03",
          id: "1",
          text: "Task 1"
        },
        {
          start: "2014-10-03",
          end: "2014-10-05",
          id: "2",
          text: "Task 2"
        }    
      ]    
    }
  ];

  // initialize and render the Gantt chart
  gantt.init();
</script>
```

--------------------------------

### JavaScript: Simple Prompt for Event Editing

Source: https://doc.daypilot.org/scheduler/event-editing

A basic example using a JavaScript prompt to get a new event name. The event's text is updated, and the changes are saved to the scheduler.

```javascript
<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.eventClicked = function(args) {
    var name = prompt("New event name:", "Event");
    if (!name) return;
    args.e.text(name);
    dp.events.update(args.e);
  };
  // ...
  dp.init();
</script>
```

--------------------------------

### Initialize Kanban Columns and Cards

Source: https://doc.daypilot.org/kanban/column-loading

Use DayPilot.Kanban.columns.list to define Kanban columns and DayPilot.Kanban.cards.list for the cards. Initialize the Kanban component with dp.init().

```javascript
<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Kanban("dp");
    dp.columns.list = [
        {name: "Analysis", id: "1", barColor: "#f9ba25"},
        {name: "Draft", id: "2"},
        {name: "Testing", id: "3"}
    ];
    dp.cards.list = [
        {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
        {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2."},
    ];
    dp.init();

</script>
```

--------------------------------

### Initialize DayPilot Calendar with Java Backend

Source: https://doc.daypilot.org/calendar/jquery

Initialize the DayPilot Calendar with a Java backend URL and a custom CSS prefix. Includes necessary JavaScript and CSS includes.

```javascript
<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />    

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("#dp").daypilotCalendar({
      backendUrl : '${pageContext.request.contextPath}/dpc',
      cssClassPrefix: "calendar_white",
      startDate: new DayPilot.Date("2013-03-25").firstDayOfMonth(),
      viewType: "Week"
    });
</script>
```

--------------------------------

### Custom 8-Hour Shifts Timeline

Source: https://doc.daypilot.org/scheduler/timeline

Generates a custom timeline with 8-hour shifts for a specified number of days. This example demonstrates creating a non-continuous timeline by defining specific start and end times for each shift.

```javascript
const dp = new DayPilot.Scheduler("dp", {
  cellWidth: 80,
  scale: "Manual",
  timeline: generateTimeline(),
  timeHeader: [
    {groupBy: "Day", format: "d MMMM yyyy"},
    {groupBy: "Cell", format: "HH:mm"}
  ],
  onBeforeCellRender: args => {
    args.cell.business = true;
  },
  // ...
});
dp.init();


function generateTimeline() {

  const timeline = [];

  const first = DayPilot.Date.today();
  const days = 30;

  for (let i = 0; i < days; i++) {
    const day = first.addDays(i);
    const start = day.addDays(-1).addHours(22);
    const end = start.addHours(8);

    timeline.push({start, end});
    timeline.push({start: start.addHours(8), end: start.addHours(16)});
    timeline.push({start: start.addHours(16), end: start.addHours(24)});
  }

  return timeline;
}
```

--------------------------------

### Disable Past Cells in Angular Scheduler

Source: https://doc.daypilot.org/scheduler/disabled-cells

In Angular, the onBeforeCellRender event handler can be used to disable cells. This example disables all cells in the past by comparing the cell's start date with the current date.

```typescript
import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>`,
  styles: [""]
})
export class SchedulerComponent {

  @ViewChild('scheduler')
  scheduler!: DayPilotSchedulerComponent;

  config: DayPilot.SchedulerConfig = {
    onBeforeCellRender: args => {
      if (args.cell.start < DayPilot.Date.today()) {
        args.cell.disabled = true;
        args.cell.backColor = "#dddddd";
      }
    },
    // ...
  };

}


```

--------------------------------

### ASP.NET WebForms: Switch Year Example

Source: https://doc.daypilot.org/scheduler/commandcallback

Triggers a server-side command to change the scheduler's year. The server-side handler processes the 'year' command and updates the scheduler's start date and days.

```aspx
<a href="javascript:dps1.commandCallBack('year', 2013);">Next</a>
```

```aspx.cs
protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
    switch (e.Command)
    {
        case "year":
            DayPilotScheduler1.StartDate = new DateTime((int)e.Data, 1, 1);
            DayPilotScheduler1.Days = Year.Days(DayPilotScheduler1.StartDate.Year);
            break;
        // ...
    }
    // ...
    DayPilotScheduler1.DataBind();
    DayPilotScheduler1.Update(CallBackUpdateType.Full);
}
```

--------------------------------

### Disable Link Points for Past Events

Source: https://doc.daypilot.org/scheduler/link-creation-drag-and-drop

Disable link creation points for specific events by setting the `linkCreateDisabled` property to `true` in the `onBeforeEventRender` event handler. This example disables points for events that have already started.

```javascript
{
  onBeforeEventRender: args => {
    if (args.data.start < DayPilot.Date.now()) {
        args.data.linkCreateDisabled = true;
    }
  },
  // ...
}
```

--------------------------------

### Vue Scheduler with Composition API

Source: https://doc.daypilot.org/scheduler/vue-js

Example of using the Vue Scheduler component with Vue 3 Composition API. It shows how to get a reference to the scheduler control and handle events like time range selection.

```html
<template>
  <DayPilotScheduler
    ref="scheduler"
    :timeHeaders="[{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }]"
    scale="Day"
    :days="DayPilot.Date.today().daysInMonth()"
    :startDate="DayPilot.Date.today().firstDayOfMonth()"
    timeRangeSelectedHandling="Enabled"
    :resources="resources"
    :events="events"
    @timeRangeSelected="onTimeRangeSelected"
  />
</template>
```

```javascript
import { ref, onMounted } from 'vue';
import { DayPilot, DayPilotScheduler } from 'daypilot-pro-vue';

const scheduler = ref(null);

const resources = ref([]);
const events = ref([]);

async function onTimeRangeSelected(args) {
  const scheduler = args.control;
  const modal = await DayPilot.Modal.prompt('Create a new event:', 'Event 1');
  scheduler.clearSelection();
  if (modal.canceled) {
    return;
  }
  scheduler.events.add({
    start: args.start,
    end: args.end,
    id: DayPilot.guid(),
    resource: args.resource,
    text: modal.result,
  });
}

function loadResources() {
  resources.value = [
    { name: 'Resource 1', id: 'R1' },
    { name: 'Resource 2', id: 'R2' },
    { name: 'Resource 3', id: 'R3' },
  ];
}

function loadEvents() {
  events.value = [
    {
      id: 2,
      start: DayPilot.Date.today().addDays(2),
      end: DayPilot.Date.today().addDays(5),
      text: 'Event 1',
      resource: 'R2',
    },
  ];
}

onMounted(() => {
  loadResources();
  loadEvents();
  scheduler.value.control.message('Welcome!');
});
```

--------------------------------

### Initialize Scheduler with Resource Tree (JavaScript)

Source: https://doc.daypilot.org/scheduler/resource-tree

Enables the resource tree functionality and defines a hierarchical structure for resources with nested children. Includes sample events.

```javascript
<div id="dp"><div>

<script>
  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.treeEnabled = true;
  dp.resources = [
    { name: "Locations", id: "Locations", expanded: true, children:[
        { name : "Room 1", id : "Room1" },
        { name : "Room 2", id : "Room2" },
        { name : "Room 3", id : "Room3" },
        { name : "Room 4", id : "Room4" },
      ]
    },
    { name: "People", id: "People", expanded: true, children:[
        { name : "Person 1", id : "Person1" },
        { name : "Person 2", id : "Person2" },
        { name : "Person 3", id : "Person3" },
        { name : "Person 4", id : "Person4" },
      ]
    },
    { name: "Tools", id: "Tools", expanded: true, children:[
        { name : "Tool 1", id : "Tool1" },
        { name : "Tool 2", id : "Tool2" }
      ] 
    },
  ];

  dp.events.list = [
    {"start":"2022-08-04T12:00:00","end":"2022-08-05T13:00:00","id":"d81fd375-781a-0279-44c6-c224d102fa39","resource":"Room1","text":"Event 1","barColor":"#3c78d8","barBackColor":"#a4c2f4"},
    {"start":"2022-08-08T12:00:00","end":"2022-08-09T12:00:00","id":"990867b2-86c0-797c-659c-d551a9a4fbdc","resource":"Room2","text":"Event 2","barColor":"#6aa84f","barBackColor":"#b6d7a8"},
    {"start":"2022-08-04T12:00:00","end":"2022-08-09T17:00:00","id":"5e017761-de95-01d7-819f-2d769ddb6668","resource":"Room3","text":"Event 3","barColor":"#f1c232","barBackColor":"#ffe599"},
  ];

  dp.init();
</script>
```

--------------------------------

### Load Events from URL (JavaScript)

Source: https://doc.daypilot.org/month/event-loading

Use the events.load() method to fetch event data from a remote URL. The URL will be appended with start and end query parameters for the current view. The default HTTP method is GET.

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

```javascript
dp.eventsLoadMethod = "POST";
```

--------------------------------

### Div-based Layout Example (HTML)

Source: https://doc.daypilot.org/scheduler/layout

Demonstrates a typical div-based layout structure for DayPilot Scheduler, including a container and nested divs for left and main content areas. This structure is recommended for better compatibility, especially with percentage-based widths.

```html
<div id="container" style="width:100%">
    <div id="left" style="float:left; width: 120px; ">
        Menu goes here...
    </div>
    <div id="main" style="margin-left: 120px">
        <div style="width:99%"> <!-- This div fixes IE6 problems -->
            DayPilotScheduler goes here...
        </div>
    </div>
</div>
```

--------------------------------

### Initialize DayPilot Monthly Calendar with jQuery

Source: https://doc.daypilot.org/month/jquery

Initializes the DayPilot Monthly Calendar using jQuery. Ensure the daypilot-all.min.js script and the appropriate theme CSS are included. This example uses a specific CSS class prefix and start date.

```javascript
<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/month_white.css" />    

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("#dp").daypilotMonth({
      cssClassPrefix: "month_white",
      startDate: new DayPilot.Date("2013-03-25")
    });
</script>
```

--------------------------------

### Highlight Current Cell with onBeforeCellRender

Source: https://doc.daypilot.org/calendar/highlighting-current-time

Use the `onBeforeCellRender` event handler to customize cell appearance. This example highlights the current calendar cell in red if the current time falls within the cell's start and end times.

```javascript
{
  onBeforeCellRender: (args) => {
    const now = DayPilot.Date.now();
    if (args.cell.start <= now && now < args.cell.end) {
        args.cell.backColor = "red";
    }
  },
  // ....
}
```

--------------------------------

### ASP.NET MVC: Navigation and Delete Examples

Source: https://doc.daypilot.org/scheduler/commandcallback

Demonstrates client-side links to trigger server-side commands for navigation (next, previous, this) and event deletion. The server-side controller handles these commands, updating the scheduler accordingly.

```html
<a href="javascript:dps.commandCallBack('next');">Next</a>
<a href="javascript:dps.commandCallBack('previous');">Previous</a>

<a href="javascript:dps.commandCallBack('delete', { id: 123});">Delete Event with ID=123</a>
```

```csharp
class Dps : DayPilotScheduler
{

  protected override void OnCommand(CommandArgs e)
  {
      switch (e.Command)
      {
          case "refresh":
              UpdateWithMessage("Refreshed");
              break;
          case "next":
              StartDate = StartDate.AddYears(1);
              Days = Year.Days(StartDate);
              Update(CallBackUpdateType.Full);
              break;
          case "previous":
              StartDate = StartDate.AddYears(-1);
              Days = Year.Days(StartDate);
              Update(CallBackUpdateType.Full);
              break;
          case "this":
              StartDate = Year.First(DateTime.Today);
              Days = Year.Days(StartDate);
              Update(CallBackUpdateType.Full);
              break;
          case "delete":
              string id = (string)e.Data["id"];
              new EventManager(Controller).EventDelete(id);
              Update(CallBackUpdateType.EventsOnly);
              break;
      }
  }
}
```

--------------------------------

### Initialize Day View in JavaScript

Source: https://doc.daypilot.org/calendar/day-view

Set the viewType to "Day" and specify the startDate to display a single day. Initialize the calendar using dp.init().

```html
<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Day";
  dp.startDate = "2022-03-25";
  // ...
  dp.init();
</script>
```

--------------------------------

### Add Active Areas to Time Header (JavaScript)

Source: https://doc.daypilot.org/calendar/time-header-active-areas

Use the BeforeTimeHeaderRender event handler to define active areas within time header cells. This example adds a hover area that displays the cell's start time when clicked.

```javascript
dp.onBeforeTimeHeaderRender = function(args) {
    args.header.areas = [ {left: 0, top: 0, right: 0, bottom: 0, v: "Hover", onClick: function(args) { alert(args.source.start); } } ];
};
```

--------------------------------

### React Scheduler Custom Timeline (9 AM - 6 PM)

Source: https://doc.daypilot.org/scheduler/timeline

Implements a custom timeline for a React Scheduler component, with each day limited to 9 AM to 6 PM. This example uses the 'Manual' scale and defines the start and end times for each day's cells.

```javascript
import React, { useState, useEffect } from 'react';
import { DayPilot, DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const createTimeline = () => {
        const days = DayPilot.Date.today().daysInMonth();
        const start = DayPilot.Date.today().firstDayOfMonth();

        const result = [];
        for (let i = 0; i < days; i++) {
            const day = start.addDays(i);
            result.push({
                start: day.addHours(9),
                end: day.addHours(18)
            });
        }
        return result;
    }

    const [config, setConfig] = useState({
        timeline: createTimeline(),
        scale: "Manual",
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Day", format: "d" },
        ],
    });

    return (
        <DayPilotScheduler 
           {...config}
        />
    );
};

export default Scheduler;
```

--------------------------------

### Initialize Scheduler with Resources View (JavaScript)

Source: https://doc.daypilot.org/scheduler/resources

Basic JavaScript initialization for the DayPilot Scheduler, setting the view type to 'Resources'.

```html
<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.viewType = "Resources";
  /// ...
  dp.init();
</script>
```

--------------------------------

### Initialize DayPilot Calendar with jQuery for Java Backend

Source: https://doc.daypilot.org/month/jquery

Initializes the DayPilot Calendar component using jQuery, targeting a Java backend. This setup includes the necessary DayPilot script, theme, and specifies the backend URL context path along with the start date.

```javascript
<script src="scripts/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />    

<div id="dp"></div>

<script type="text/javascript">
    var dp = $("#dp").daypilotCalendar({
      backendUrl : '${pageContext.request.contextPath}/dpm',
      cssClassPrefix: "month_white",
      startDate: new DayPilot.Date("2013-03-25")
    });
</script>
```

--------------------------------

### Enforce Workday Start Times

Source: https://doc.daypilot.org/scheduler/event-moving-customization

This snippet ensures that events can only be moved to start on a workday. If a weekend is selected, it automatically increments the start date until a workday is found.

```javascript
onEventMoving: (args) => {
  // must start on a working day
  while (args.start.getDayOfWeek() == 0 || args.start.getDayOfWeek() == 6) {
      args.start = args.start.addDays(1);
  }
  args.left.enabled = false;
  args.right.html = "Events must start on a workday.";
};
```

--------------------------------

### Initialize Kanban with Swim Lanes (JavaScript)

Source: https://doc.daypilot.org/kanban/swim-lane-loading

Use the `swimlanes.list` array to define swim lanes for the Kanban board. Swim lanes are displayed in the order they appear in the array. A swim lane can be initialized as collapsed.

```html
<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Kanban("dp");

    dp.swimlanes.list = [
        {name: "Swimlane A", id: "A"},
        {name: "Swimlane B", id: "B", collapsed: true}
    ];

    dp.init();

</script>
```