Appointment Resize in Flutter Event Calendar (SfCalendar)

18 Nov 20186 minutes to read

You can quickly change an appointment’s start and end times by resizing the appointment.

Allow Appointment resize

allowAppointmentResize property allows you to reschedule the appointment by resizing the appointment in desktop platforms.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: SfCalendar(
              view: CalendarView.week,
              dataSource: _getCalendarDataSource(),
              allowAppointmentResize: true),
        ),
      ),
    );
  }
}

_AppointmentDataSource _getCalendarDataSource() {
  List<Appointment> appointments = <Appointment>[];
  return _AppointmentDataSource(appointments);
}

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

NOTE

• This feature is not applicable for mobile platforms.

onAppointmentResizeStart

onAppointmentResizeStart callback is called whenever the appointment starts resizing in SfCalendar. The AppointmentResizeStartDetails arguments contains the resizing appointment, and resource details.

• appointment - Get the resizing appointment details.
• resource - Get the resource details.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: SfCalendar(
            view: CalendarView.week,
            dataSource: _getCalendarDataSource(),
            allowAppointmentResize: true,
            onAppointmentResizeStart: resizeStart,
          ),
        ),
      ),
    );
  }
}

void resizeStart(AppointmentResizeStartDetails appointmentResizeStartDetails) {
  dynamic appointment = appointmentResizeStartDetails.appointment;
  CalendarResource? resource = appointmentResizeStartDetails.resource;
}

onAppointmentResizeUpdate

onAppointmentResizeUpdate callback is called whenever the appointment is being resized in SfCalendar. The AppointmentResizeUpdateDetails arguments contains the resizing appointment, resizing time, resizing offset and resource details.

• appointment - Get the resize appointment.
• resizingTime - Get the resize appointment time.
• resizingOffset - Get the offset value.
• resource - Get the resource details.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: SfCalendar(
            view: CalendarView.week,
            dataSource: _getCalendarDataSource(),
            allowAppointmentResize: true,
            onAppointmentResizeUpdate: resizeUpdate,
          ),
        ),
      ),
    );
  }
}

void resizeUpdate(AppointmentResizeUpdateDetails appointmentResizeUpdateDetails) {
  dynamic appointment = appointmentResizeUpdateDetails.appointment;
  DateTime? resizingTime = appointmentResizeUpdateDetails.resizingTime;
  Offset? resizingOffset = appointmentResizeUpdateDetails.resizingOffset;
  CalendarResource? resourceDetails = appointmentResizeUpdateDetails.resource;
}

onAppointmentResizeEnd

onAppointmentResizeEnd callback is called whenever the appointment resizing ends in the SfCalendar. The AppointmentResizeEndDetails arguments contains the resized appointment, start time, end time and resource details.

• appointment - Get the resized appointment details.
• startTime - Get the start time.
• endTime - Get the end time.
• resource - Get the resource details.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: SfCalendar(
            view: CalendarView.week,
            dataSource: _getCalendarDataSource(),
            allowAppointmentResize: true,
            onAppointmentResizeEnd: resizeEnd,
          ),
        ),
      ),
    );
  }
}

void resizeEnd(AppointmentResizeEndDetails appointmentResizeEndDetails) {
  dynamic appointment = appointmentResizeEndDetails.appointment;
  DateTime? startTime = appointmentResizeEndDetails.startTime;
  DateTime? endTime = appointmentResizeEndDetails.endTime;
  CalendarResource? resourceDetails = appointmentResizeEndDetails.resource;
}