Articles in this section
Category / Section

How to customize the selection using decoration in the Flutter Calendar

1 min read

In the Flutter Event Calendar, you can customize the selection using the selectionDecoration property of calendar.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
 
void main() => runApp(SelectionDecoration());
 
class SelectionDecoration extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: SafeArea(
                  child: SfCalendar(
                    view: CalendarView.day,
                    allowedViews: <CalendarView>[
                      CalendarView.day,
                      CalendarView.week,
                      CalendarView.workWeek,
                      CalendarView.month,
                      CalendarView.timelineDay,
                      CalendarView.timelineWeek,
                      CalendarView.timelineWorkWeek,
                      CalendarView.timelineMonth,
                    ],
                    selectionDecoration: BoxDecoration(
                      color: Colors.purpleAccent,
                      border: Border.all(color: Colors.deepPurple, width: 2),
                      borderRadius: const BorderRadius.all(Radius.circular(4)),
                      shape: BoxShape.rectangle,
 
                    ),
                  )),
            ));
  }
}

View sample in GitHub

decoration gif

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied