Features

  • Uses Angular 2 Calendar component from DayPilot Pro package
  • Four sample CSS demos included: Default, Blue, Traditional, White
  • Live switching of the CSS theme using a drop-down list
  • Trial version of DayPilot Pro for JavaScript is included (see license below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Live Demo

You can test this project in a live demo:

Default CSS Theme

angular2-calendar-css-theme-default.png

Blue CSS Theme

angular2-calendar-css-theme-blue.png

Traditional CSS Theme

angular2-calendar-css-theme-traditional.png

White CSS Theme

angular2-calendar-css-theme-white.png

Using a Custom CSS Theme

The following steps are required:

  1. Include the theme CSS file
  2. Specify the theme name using "theme" property of the calendar config.

Include the Theme CSS File

The default CSS theme ("calendar_default") is built in - it doesn't require any external CSS file.

In our sample Angular 2 application, we are going to use multiple themes (which can be switch on the fly) so we will include all of them in styles.css.

src/styles.css

@import 'themes/calendar_blue.css';
@import 'themes/calendar_traditional.css';
@import 'themes/calendar_transparent.css';
@import 'themes/calendar_white.css';

It's necessary to include the theme files your project ("themes" directory) and import them in styles.css. These global css files will get included in the compiled CSS when you build the Angular 2 application.

It's necessary to include the themes in the global CSS file. If you include it in the component-specific CSS files (using "styleUrls" property of the @Component annotation) the class names will get prefixed with a local identifier. However, the internal DayPilot Calendar DOM elements are not marked with the identifier and the CSS theme wouldn't be applied.

Changing the Calendar CSS Theme

The CSS theme can be activated using "theme" property of the Angular 2 calendar component config:

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot} from "daypilot-pro-angular";
import {DataService} from "./data.service";

@Component({
  selector: 'calendar-component',
  template: `
  <daypilot-calendar [config]="config"></daypilot-calendar>
  `,
  styles: [``]
})
export class CalendarComponent implements AfterViewInit {

  config: any = {
    // ...
    theme: "calendar_blue"
  };

  // ...

}

The attached sample Angular 2 application lets you change the theme on the fly using a drop-down list (<select> element):

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot} from "daypilot-pro-angular";
import {DataService} from "./data.service";

@Component({
  selector: 'calendar-component',
  template: `
  <div class="space">
      Theme: 
      <select [(ngModel)]="config.theme">
        <option *ngFor="let item of themes" [value]="item.value">{{item.name}}</option>
      </select>
  </div>
  <div class="{{config.theme === 'calendar_blue' ? 'calendar_blue_wrap': ''}}"><div class="{{config.theme === 'calendar_blue' ? 'calendar_blue_wrap_inner': ''}}">
  <daypilot-calendar [config]="config" [events]="events" #calendar></daypilot-calendar>
  </div></div>
  `,
  styles: [``]
})
export class CalendarComponent implements AfterViewInit {

  @ViewChild("calendar") calendar: DayPilot.Angular.Calendar;

  events: any[] = [];

  config: any = {
    viewType: "Week",
    startDate: "2017-04-02",
    theme: "calendar_blue"
  };

  themes: any[] = [
    {name: "Default", value: "calendar_default"},
    {name: "Blue", value: "calendar_blue"},
    {name: "Traditional", value: "calendar_traditional"},
    {name: "White", value: "calendar_white"},
  ];

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    var from = this.calendar.control.visibleStart();
    var to = this.calendar.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe( result => {
      this.events = result;
    } );
  }

}

Angular 2 Component Template Changes

The theme don't require any changes to the HTML template. You can simply insert the <daypilot-calendar> element:

<daypilot-calendar [config]="config" [events]="events" #calendar></daypilot-calendar>

The only exception is the "blue" theme which includes a border around the calendar. The border requires two wrapper divs to be added:

<div class="calendar_blue_wrap"><div class="calendar_blue_wrap_inner">
  <daypilot-calendar [config]="config" [events]="events" #calendar></daypilot-calendar>
</div></div>

Creating a Custom CSS Theme

angular2-calendar-css-theme-designer.png

You can create your own CSS theme using the online theme designer. It lets you design a theme in a WYSIWYG mode and download a generated CSS file.

You can customize the generated CSS file manually if  needed.