Timeslot views in flutter calendar

Calendar has six built-in time slot views used to display date, and the views will display based on the current day by default. Appointments on a specific day will be arranged in respective timeslots based on its duration.

  • Day view: Displays a single day.
  • Week view: Views all days of a week.
  • Work week view: Views only working days of a week. By default, Saturday and Sunday are the non-working days. You can customize it with any days of a week.
  • Timeline day view: Displays the single day in horizontal time axis.
  • Timeline week view: Displays the days of a week in horizontal time axis. You can see the past or future dates by scrolling to right or left.
  • Timeline work week view: Views only working days of a week in horizontal axis. By default, Saturday and Sunday are the non-working days. You can customize it with any days of a week.
  • Timeline month: Display appointments across multiple days of a month on a horizontal axis where each column represents a single day.

Change time interval

You can customize the interval of timeslots in all the timeslots view by using the timeInterval property of TimeSlotViewSettings.

@override
Widget build(BuildContext context) {
  return Container(
    child: SfCalendar(
      view: CalendarView.week,
      timeSlotViewSettings:
          TimeSlotViewSettings(timeInterval: Duration(hours: 2)),
    ),
  );
}

Change time interval

NOTE

  • If you modify the timeInterval value (in minutes), you need to change the time labels format by setting the timeFormat value to hh:mm. By default, timeFormat value is h a.

Change time interval height

You can customize the time interval height of the day, week, and workweek view by using the timeIntervalHeight property of TimeSlotViewSettings.

@override
Widget build(BuildContext context) {
  return Container(
    child: SfCalendar(
      view: CalendarView.week,
      timeSlotViewSettings: TimeSlotViewSettings(
        timeIntervalHeight: 100,
      ),
    ),
  );
}

Change time interval height

Change time interval width

You can customize the time interval width of the timeline day, timeline week, timeline work week, and timeline month view by using the timeIntervalWidth property of TimeSlotViewSettings.

@override
Widget build(BuildContext context) {
  return Container(
    child: SfCalendar(
      view: CalendarView.timelineDay,
      timeSlotViewSettings: TimeSlotViewSettings(
        timeIntervalWidth: 100,
      ),
    ),
  );
}

Change time interval width

Flexible working days and working hours

The default values for startHour and endHour are 0 and 24 to show all the time slots in time slot views. You can to set the startHour and endHour properties of timeSlotViewSettings to show only the required time duration for users. You can set startHour and endHour in time duration to show the required time duration in minutes.

You can also customize the nonworking days of a week by using the nonWorkingDays property of timeSlotViewSettings to show only the required days for the users.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.workWeek,
    timeSlotViewSettings: TimeSlotViewSettings(
        startHour: 9,
        endHour: 16,
        nonWorkingDays: <int>[DateTime.friday, DateTime.saturday]),
  ));
}

Flexible working days and working hours

NOTE

  • The nonWorkingDays property will applicable only for workWeek and timelineWorkWeek views only, and not applicable for the remaining views.
  • Calendar Appointments UI, which does not fall within the startHour and endHour will not be visible and if it falls partially, it will be clipped.
  • No need to specify the decimal point values for startHour and endHour, if you don’t want to set the minutes.
  • The number of time slots will be calculated based on total minutes of a day and time interval (total minutes of a day ((start hour - end hour) * 60) / time interval).
  • If custom timeInterval is given, then the number of time slots calculated based on the given TimeInterval should result in integer value (total minutes % timeInterval = 0), otherwise next immediate time interval that result in integer value when divide total minutes of a day will be considered. For example, if timeInterval=2 Hours 15 minutes and total minutes = 1440 (24 Hours per day), then timeInterval will be changed to ‘144’ (1440%144=0) by considering (total minutes % timeInterval = 0), it will return integer value for time slots rendering.
  • If the custom startHour and endHour are given, then the number of time slots calculated based on given startHour and endHour should result in integer value, otherwise next immediate timeInterval will be considered until the result is integer value. For example, if startHour is 9 (09:00AM), endHour is 18.25 (06:15 PM), timeInterval is 30 minutes, and total minutes = 555 ((18.25-9)*60), then the timeInterval will be changed to ’37 minutes’ (555%37=0) by considering (total minutes % timeInterval = 0). it will return integer value for time slots rendering.

Special time regions

You can restrict the user interaction such as selection and highlights specific regions of time in the timeslot views by adding the specialRegions property of SfCalendar. You need to set the startTime and endTime properties of TimeRegion to create a specialTimeRegion, you can use the timeZone property to set the specific timezone for start and end time of specialTimeRegion. The specialTimeRegion will display the text or icon on it that set to the text or iconData property of TimeRegion.

Special time region in Flutter event calendar

NOTE

  • If time region has both the text and icon then it will draw icon only.
  • The TimeRegion not applicable, when the calendar view is set to timelineMonth.

Selection restriction in timeslots

You can enable or disable the touch interaction of TimeRegion using the enablePointerInteraction property of TimeRegion. By default, its value is true.

@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.week,
        specialRegions: _getTimeRegions(),
      ),
    );
  }

  List<TimeRegion> _getTimeRegions() {
    final List<TimeRegion> regions = <TimeRegion>[];
    regions.add(TimeRegion(
        startTime: DateTime.now(),
        endTime: DateTime.now().add(Duration(hours: 1)),
        enablePointerInteraction: false,
        color: Colors.grey.withOpacity(0.2),
        text: 'Break'));

    return regions;
  }

Special time region touch restriction

NOTE
This property only restricts the interaction on region and it does not restrict the following:

  • Programmatic selection (if the user updates the selected date value dynamically)
  • Does not clear the selection when the user selects the region and dynamically change
    the enablePointerInteraction property to false
  • It does not restrict appointment interaction when the appointment placed
    in the region
  • It does not restrict the appointment rendering on a region, when appointments are loaded from data services or adding programmatically.

Recurring time region

The recurring time region on a daily, weekly, monthly, or yearly interval. The recurring special time regions can be created by setting the recurrenceRule property in TimeRegion.

@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.week,
        specialRegions: _getTimeRegions(),
      ),
    );
  }

  List<TimeRegion> _getTimeRegions() {
    final List<TimeRegion> regions = <TimeRegion>[];
    regions.add(TimeRegion(
        startTime: DateTime.now(),
        endTime: DateTime.now().add(Duration(hours: 1)),
        enablePointerInteraction: false,
        recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
        textStyle: TextStyle(color: Colors.black45, fontSize: 15),
        color: Colors.grey.withOpacity(0.2),
        text: 'Break'));

    return regions;
  }

Special time region recurrence

You can refer to here to know more about the recurrence rule.

Recurrence exception dates

You can delete any of occurrence that is an exception from the recurrence pattern time region by using the recurrenceExceptionDates property of TimeRegion. The deleted occurrence date will be considered as a recurrence exception date.

@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.week,
        specialRegions: _getTimeRegions(),
      ),
    );
  }

  List<TimeRegion> _getTimeRegions() {
    final List<TimeRegion> regions = <TimeRegion>[];
    regions.add(TimeRegion(
        startTime: DateTime.now(),
        endTime: DateTime.now().add(Duration(hours: 1)),
        enablePointerInteraction: false,
        recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
        textStyle: TextStyle(color: Colors.black45, fontSize: 15),
        color: Colors.grey.withOpacity(0.2),
        recurrenceExceptionDates: [DateTime.now().add(Duration(days: 2))],
        text: 'Break'));

    return regions;
  }

Special time region recurrence exception

Special time region customization

The specialTimeRegion background color can be customized by using the color and textStyle properties of TimeRegion that is used to customize the text style for the text and iconData of the specialTimeRegion.

@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.week,
        specialRegions: _getTimeRegions(),
      ),
    );
  }

  List<TimeRegion> _getTimeRegions() {
    final List<TimeRegion> regions = <TimeRegion>[];
    regions.add(TimeRegion(
        startTime: DateTime.now(),
        endTime: DateTime.now().add(Duration(hours: 1)),
        enablePointerInteraction: false,
        textStyle: TextStyle(color: Colors.red, fontSize: 15),
        color: Color.fromRGBO(255, 236, 179, 1.0),
        iconData: Icons.group));

    return regions;
  }

Special time region customization

Full screen calendar

The calendar time interval height and width can be adjusted based on the screen height by changing the value of the timeIntervalHeight and timeIntervalWidth property to -1. It will auto fit the screen height and width.

@override
Widget build(BuildContext context) {
  return Container(
    child: SfCalendar(
      view: CalendarView.week,
      timeSlotViewSettings: TimeSlotViewSettings(
        timeIntervalHeight: -1,
      ),
    ),
  );
}

Full screen calendar

Change time ruler size

You can customize the size of the time ruler view where the labels mentioning the time are placed by using the timeRulerSize property of TimeSlotViewSettings.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          timeSlotViewSettings: TimeSlotViewSettings(timeRulerSize: 100),
        ),
      ),
    ),
  );
}

Change time ruler size

Minimum appointment duration

The minimumAppointmentDuration property in timeSlotViewSettings is to set an arbitrary height to appointments when it has minimum duration, in timeslot views, so that the subject can be readable.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          timeSlotViewSettings: TimeSlotViewSettings(
              minimumAppointmentDuration: Duration(minutes: 30)),
        ),
      ),
    ),
  );
}

_AppointmentDataSource _getCalendarDataSource() {
  List<Appointment> appointments = <Appointment>[];
  appointments.add(Appointment(
    startTime: DateTime.now(),
    endTime: DateTime.now().add(Duration(minutes: 10)),
    subject: 'Meeting',
    color: Colors.blue,
    startTimeZone: '',
    endTimeZone: '',
  ));

  return _AppointmentDataSource(appointments);
}

class _AppointmentDataSource extends CalendarDataSource {
  _AppointmentDataSource(List<Appointment> source) {
    appointments = source;
  }
}

Minimum appointment duration

NOTE

  • minimumAppointmentDuration value will be set, when an appointment duration value lesser than minimumAppointmentDuration.
  • Appointment duration value will be set, when the appointment duration value greater than minimumAppointmentDuration.
  • timeInterval value will be set, when minimumAppointmentDuration greater than timeInterval with lesser appointment duration.
  • All day Appointment does not support minimumAppointmentDuration.
  • The minimumAppointmentDuration property not applicable when the calendar view is set to timelineMonth.

Timeline appointment height

You can customize the height of appointment in timeline views using the timelineAppointmentHeight property of TimeSlotViewSettings.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.timelineWeek,
          timeSlotViewSettings:
              TimeSlotViewSettings(timelineAppointmentHeight: 100),
        ),
      ),
    ),
  );
}

Timeline appointment height

View header text formatting

You can customize the date and day format of SfCalendar ViewHeader by using the dateFormat and dayFormat properties of TimeSlotViewSettings.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          timeSlotViewSettings:
              TimeSlotViewSettings(dateFormat: 'd', dayFormat: 'EEE'),
        ),
      ),
    ),
  );
}

View header text formatting

Time text formatting

You can customize the format for the labels mentioning the time, by setting the timeFormat property of timeSlotViewSettings in calendar.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          timeSlotViewSettings: TimeSlotViewSettings(
              timeInterval: Duration(minutes: 30), timeFormat: 'h:mm'),
        ),
      ),
    ),
  );
}

Time text formatting

Time text appearance

You can customize the text style for the labels mentioning the time, by setting the timeTextStyle property of timeSlotViewSettings in calendar.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          timeSlotViewSettings: TimeSlotViewSettings(
              timeTextStyle: TextStyle(
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.italic,
            fontSize: 15,
            color: Colors.blue,
          )),
        ),
      ),
    ),
  );
}

Time text appearance

See also

Time label customization in the flutter event calendar (SfCalendar)