Custom Range View

The scheduler comes with built-in support for day, week and month views. For those situations where a custom range makes more sense, it is possible to override the calendar navigation component with a range picker.

The calendar header can be easily customized and a two-way synchronization needs to be kept between the scheduler and range picker.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Configure the Scheduler with a custom date range view — let users pick any date span from a header range picker instead of fixed day.

Code

View code on GitHub 
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  formatDate,
  MbscCalendarEvent,
  MbscDateType,
  MbscEventcalendarOptions,
  MbscEventcalendarView,
  MbscModule,
  setOptions ,
} from '@mobiscroll/angular';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}
  startDate!: Date;
  endDate!: Date;
  refDate!: Date;
  selectedDate: MbscDateType = new Date();
  rangeValue: any = [];
  rangeText = '';

  myEvents: MbscCalendarEvent[] = [];
  view = 'calendar';
  calView: MbscEventcalendarView = {
    scheduler: {
      type: 'day',
      size: 14,
    },
  };

  calendarOptions: MbscEventcalendarOptions = {
    onPageLoading: (args) => {
      const end = args.lastDay;
      this.startDate = args.firstDay;
      this.endDate = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1, 0);
      // Set button text
      this.rangeText = this.getFormattedRange(this.startDate, this.endDate);
      // Set range value
      this.rangeValue = [this.startDate, this.endDate];
      // Navigate the calendar
      this.selectedDate = this.startDate;
    },
  };

  onClose(): void {
    const date = this.rangeValue;
    if (date[0] && date[1]) {
      // Navigate the calendar
      this.selectedDate = date[0];
      this.startDate = date[0];
      this.endDate = date[1];
      // Set calendar view
      this.refDate = date[0];
      this.calView = {
        scheduler: {
          type: 'day',
          size: this.getNrDays(date[0], date[1]),
        },
      };
    } else {
      this.rangeValue = [this.startDate, this.endDate];
    }
  }

  // Returns the formatted date
  getFormattedRange(start: any, end: any): string {
    return (
      formatDate('MMM D, YYYY', new Date(start)) +
      (end && this.getNrDays(start, end) > 1 ? ' - ' + formatDate('MMM D, YYYY', new Date(end)) : '')
    );
  }

  // Returns the number of days between two dates
  getNrDays(start: any, end: any): number {
    return Math.round(Math.abs((end.setHours(0) - start.setHours(0)) / (24 * 60 * 60 * 1000))) + 1;
  }

  ngOnInit(): void {
    this.http
      .jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events/?vers=5', 'callback')
      .subscribe((resp: MbscCalendarEvent[]) => {
        this.myEvents = resp;
      });
  }
}

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.