Introducing Timeline Resource Grouping in Flutter Event Calendar | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing Timeline Resource Grouping in Flutter Event Calendar

Introducing Timeline Resource Grouping in Flutter Event Calendar

The newly introduced timeline resource grouping feature is a discrete view in our Flutter event calendar widget. It allows you to group appointments based on the available resources in the timeline view of the Calendar widget. This feature is available in our 2020 Volume 3 release.

Through this feature, you can group appointments and time regions by row based on the allocated resources in the timeline view. This feature also supports customization, allowing you to assign unique styles to the resource view.

Timeline Resource Grouping Feature in Flutter Event Calendar
Timeline Resource Grouping Feature in Flutter Event Calendar

In this blog post, we will go in depth with the timeline resource grouping feature in the Flutter Calendar widget. If you are new to the Calendar widget, please go through our getting started guide in the documentation before proceeding.

Let’s explore!

Resource sharing

There are many occasions where multiple resources will share the same event. Any edit in the shared event will be reflected in the associated resources. For example, more than one person can participate in an event as shown in the following screenshot.
Appointment Shared with Multiple Resources

Appointment Shared with Multiple Resources
Appointment Shared with Multiple Resources

Grouping

Calendar appointments and time regions can be grouped based on the assigned resources and time region in the event calendar timeline view.

Resource grouping

You can assign a resource to an appointment by setting the resourceIds property of the Appointment. Multiple resources can be assigned to an appointment.

Refer to the following code.

   
_events.add(Appointment(
              startTime: DateTime(2020, 08, 20, 10, 0, 0),
              endTime: DateTime(2020, 08, 20, 12, 0, 0),
              subject: 'Scrum',
              color: Colors.green,	
              resourceIds: <Object>[_employeeCollection[i].id],
     ));
Resource Grouping
Resource Grouping

Time region grouping

Time regions can be grouped by resource by assigning the resourceIds property of the TimeRegion. You can assign multiple resources to a time region to share it with them.

Refer to the following code.

   
for (int i = 0; i < _employeeCollection.length; i++) {
     _specialTimeRegions.add(TimeRegion(
          startTime: DateTime(date.year, date.month, date.day, 13, 0, 0),
          endTime: DateTime(date.year, date.month, date.day, 14, 0, 0),
          text: 'Lunch',
          resourceIds: <Object>[_employeeCollection[i].id],
          recurrenceRule: 'FREQ=DAILY;INTERVAL=1'));
    }
Time Region Grouping
Time Region Grouping

Visible resource count

You can display a certain number of resources in the viewable area based on your requirements and the size of the application.

Note: By default, the resource count will be adjusted based on the available size of the Event Calendar widget.

Refer to the following code.

   
resourceViewSettings: ResourceViewSettings(
        visibleResourceCount: 3,
      ),
Calendar with Visible Resource Count of 3
Calendar with Visible Resource Count of 3

Header cell customization

You can enhance the look and feel of the resource header cells by:

  • Enabling or disabling the avatar view.
  • Customizing the text style of the display name.
  • Customizing the panel size for header cells.

Show avatar

You can disable the user profile image and the circular representation of a resource by setting false to the showAvatar property in the ResourceViewSettings. This will display each resource with a resource name and the color assigned to the resource.

Refer to the following code.

   
resourceViewSettings: ResourceViewSettings(
        showAvatar: false
      ),

Display name text style

The display name text style for the resource view can be customized by setting a text style to the displayNameTextStyle property available in the ResourceViewSettings.

Refer to the following code.

   
resourceViewSettings: ResourceViewSettings(
        displayNameTextStyle: TextStyle(
          fontSize: 13,
          color: Colors.white,
          fontStyle: FontStyle.italic
        )
      ),
Custom Display Name Text Style
Custom Display Name Text Style

Resource panel size

You can customize the size of the panel that displays the resource views in the calendar by setting the size property available in the ResouceViewSettings.

Refer to the following code.

   
resourceViewSettings: ResourceViewSettings(
        size: 120
      ),
Custom Resource Panel Size
Custom Resource Panel Size

Conclusion

In this blog post, we have seen the timeline resource grouping feature introduced in the Flutter event calendar. This feature is available in the Essential Studio 2020 Volume 3 release. You can explore other features in the Calendar widget’s documentation, where you can find detailed explanations of each feature with code examples.

For existing customers, the newest version of Essential Studio 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.

Feel free to try out the samples available in our GitHub repo, and share your feedback or ask questions in the comments section. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

googleplay.png

Tags:

Share this post:

Comments (2)

Jessica Moura Ribeiro
Jessica Moura Ribeiro

Is it possible to use resource grouping outside the timeline view?

NIJAMUDEEN MOHAMED SULAIMAN
NIJAMUDEEN MOHAMED SULAIMAN

We have logged the feature request for your requirement “Horizontal Resource Grouping Support in the Flutter Event Calendar (SfCalendar)” and this is applicable for day, week, work week, and month views. We will implement this feature in any of our upcoming releases.

Now you can track the status of this feedback at the following link: Please find the feedback at the following link.

Feedback link: https://www.syncfusion.com/feedback/15067/horizontal-resource-grouping-support-in-the-flutter-event-calendar-sfcalendar

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top