Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (61)ASP.NET MVC  (84)Azure  (28)Blazor  (84)DocIO  (19)Essential JS 2  (68)Essential Studio  (162)Flutter  (99)JavaScript  (146)Microsoft  (101)PDF  (57)React  (32)Succinctly series  (120)Syncfusion  (464)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (21)Windows Forms  (54)WPF  (113)Xamarin  (124)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (48)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (41)Development  (248)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (19)Extensions  (12)File Manager  (4)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (207)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (5)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (23)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (7)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (54)UI  (113)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (190)What's new  (120)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
What’s New in 2021 Volume 1: Flutter Event Calendar

What’s New in 2021 Volume 1: Flutter Event Calendar

The Syncfusion Flutter event Calendar has seven built-in, configurable view modes that provide basic functionalities for scheduling, managing, and representing appointments efficiently. This calendar widget exposes a clean and convenient user interface for custom working days and working hours, and basic calendar operations such as date navigation and selection.  In this blog, we will explain the following new features included in our Flutter Calendar in the 2021 Volume 1 release:

Load more data on demand

Load appointments on demand whenever a user switches from one view to another or scrolls to the start or end position of the schedule view. This feature loads appointments on demand for the visible date range with a loading indicator. This improves the loading performance of appointments ranging multiple years.

Refer to the following code example.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
            controller: _controller,
            loadMoreWidgetBuilder:
                (BuildContext context, CalendarLoadMoreCallback loadMoreAppointments) {
                  return FutureBuilder<String>(
                   initialData: 'loading',
                   future: loadMoreAppointments(),
                   builder: (context, snapShot) {
                    return Container(
                        height: _controller.view == CalendarView.schedule ? 50 : double.infinity,
                        width: double.infinity,
                        color: Colors.white38,
                        alignment: Alignment.center,
                        child: CircularProgressIndicator(
                            valueColor:
                                AlwaysStoppedAnimation(Colors.deepPurple)));
                   },
                 );
              },
            dataSource: _dataSource),
      ),
    );
  }
Loading more data on demand in Flutter event Calendar
Loading more data on demand in Flutter Calendar

View navigation mode

Now, you can easily customize the swipe navigation through the viewNavigationMode property. This feature allows us to enable or disable the swipe interaction in the Calendar widget.

Refer to the following code example.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfCalendar(
         view: CalendarView.day,
        viewNavigationMode: ViewNavigationMode.none,
    ),);
  }

Current time indicator

In the Flutter event Calendar, you can now display an indicator of the current time of day by setting the showCurrentTimeIndicator property to true .

Refer to the following code example.

@override
Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.day,
        showCurrentTimeIndicator: true,
              ),
  );
  }
Current time indicator in Flutter Calendar
Current time indicator in Flutter Calendar

Header date format

Now, you can customize the date format in the header by using the headerDateFormat property.

Refer to the code example.

@override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text('Calendar'),),
      body: SfCalendar(
        view: CalendarView.month,
        headerDateFormat: 'MMM,yyy',
      ),
    );
  }
}
Custom header date format in Flutter event Calendar
Custom header date format in Flutter event Calendar

Conclusion

In this blog post, we walked through the new features in our Flutter event Calendar available in the 2021 Volume 1 release. To see all the updates in this release, please check our release notes and What’s New pages. Try out these new features and leave your feedback in the comments section below!

You can also explore other features in the Calendar widget’s documentation, where you can find detailed explanations of each feature along with code examples.

For current customers, the newest version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features.

We also encourage you to try out our Flutter project demos. You can contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top