{"id":2236,"date":"2019-12-09T11:46:00","date_gmt":"2019-12-09T11:46:00","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2236"},"modified":"2021-01-25T16:05:02","modified_gmt":"2021-01-25T16:05:02","slug":"the-different-ways-to-style-a-schedule","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/the-different-ways-to-style-a-schedule\/","title":{"rendered":"The Different Ways to Style a Schedule"},"content":{"rendered":"

In this blog post we will look at the different levels of sty\u200cling the elements and items of a schedule made with a MindFusion scheduling library. In our sample we use the Java Scheduling Library, but the API members that we use and the cascading levels of styling a schedule are universal across all MindFusion Scheduling components.<\/p>\n

I. Top Level: Theme<\/strong><\/p>\n

At the top level of styling you have themes. The scheduling library has a set of predefined themes: Light, Lila, Silver, Standard, Vista, Windows2013. You apply one of the predefined themes this way:<\/p>\n

calendar.setTheme(ThemeType.Vista);<\/pre>\n
Here is what the calendar looks like styled with the vista theme:<\/p>\n
<\/p>\n
In JavaScript, the themes are defined in CSS styles and you must reference the desired file and set the name of the theme to the calendar instance. In the other libraries, they are built-in and usually are available as members of an enum.<\/p>\n
You have the option to create a custom theme, which you can save and apply this way:<\/p>\n
calendar.setCustomTheme(new MyTheme());<\/pre>\n
Another way to apply the custom theme in Java Scheduling is:<\/p>\n
calendar.setCustomTheme(new MyTheme());<\/pre>\n
Here is the look of the calendar with the custom theme:<\/p>\n
<\/p>\n
The custom theme has changed some of the colors, widened the header so that the week days could be seen and set some borders on the cells.<\/p>\n
Creating a custom Theme requires that you override a strict set of methods. They are the public members of the Theme<\/a> class. You should override all<\/strong> of them. Among the methods that style the calendar for each view – getMonthRangeSettings<\/a> getMonthSettings<\/a> etc. You could override in detail only the method that is responsible for styling the view you would use – if it is only one. For the rest of the methods you could just write:<\/p>\n
private void initialize_MyTheme_ListViewSettings()\n{\n\t_listViewSettings = super.createListViewSettings();\n}<\/pre>\n
Every method in the Theme class must be dutifully implemented and all settings set. That comes from the fact that a Theme is the last and topmost styling instrument and it must know how to style any element that might not be explicitly styled down the tree.<\/p>\n
The online and offline documentations of the Java Scheduling library come with topics that list in details the styling settings for each of the predefined themes. Our advice is that you get the code of the Theme<\/a> that looks closest to what you want to have as a structure and modify it.<\/p>\n
The sample project that you can download at the bottom of this post implements a custom Theme based on the Vista theme and lists all members in a theme that you must set with all details.<\/strong><\/p>\n
II. View and Item Settings<\/strong><\/p>\n
One level down the tree are the view settings properties. They are available for any view. You can access those settings with the getMonthSettings<\/a> getMonthRangeSettings<\/a> etc. methods. Each one of those methods returns the styling settings of a particular view. You should use the one that corresponds to the view you’ve chosen:<\/p>\n
\/\/set the view to SingleMonth\ncalendar.setCurrentView(CalendarView.SingleMonth);\n\/\/get the styling settings for SingleMonth view\ncalendar.getMonthSettings().getDaySettings().setTodayFillColor(Color.green);<\/pre>\n
You can style the items, regardless of the view used, with the ItemSettings<\/a> object:<\/p>\n
calendar.getItemSettings().setPadding(20);<\/pre>\n
The *Settings properties define the appearance of items in terms of alignment, spacing, padding, shadow, date format. The coloring of the elements is left to Style<\/a> instances. Thus, if you want to change the color of items, you will use:<\/p>\n
\/\/customize just the items through the itemSettings field\ncalendar.getItemSettings().setPadding(20);\n\t\t\nStyle itemStyle = new Style();\nitemStyle.setBrush(new SolidBrush(Color.white));\nitemStyle.setHeaderTextColor(Color.DARK_GRAY);\t\t\nitemStyle.setHeaderTextShadowStyle(ShadowStyle.None);\ncalendar.getItemSettings().setStyle(itemStyle);<\/pre>\n
This styles all<\/strong> items on the calendar. For styling a particular item, you should use on of the methods listed underneath.<\/p>\n
Our calendar now has green header on the current day, the background of events is white and there is a bit of a padding added to the events.<\/p>\n
<\/p>\n
III. Using Events to Style Particular Items<\/strong><\/p>\n
When you want to select items that you want to style based on some distinct characteristics, you can use events. In our sample we handle the itemCreated<\/a> event, where we check if the start date of an appointment happens to be during the weekend:<\/p>\n
\/\/ Listen for item creation and for draw events\ncalendar.addCalendarListener(new CalendarAdapter(){\n\t\/\/apply custom styling to selected items\n\tpublic void itemCreated(ItemEvent e) {\n\t\tonItemCreated(e);\n\t}\t\t\t\t\n});<\/pre>\n
The Java Scheduler provides various events, which are accessible through a CalendarListener<\/a> and CalendarAdapter<\/a> instances. We handle the itemCreated<\/a> event this way:<\/p>\n
\/\/color in red events that are scheduled to start on weekends\nprotected void onItemCreated(ItemEvent e) {\n\n\tItem item = e.getItem();\n\tif(item.getStartTime().getDayOfWeek() == DayOfWeek.Saturday || \n\t\titem.getStartTime().getDayOfWeek() == DayOfWeek.Sunday)\n\t\t{\n\t\t\titem.getStyle().setBrush(new SolidBrush(new Color(213, 28, 32)));\n\t\t\titem.getStyle().setHeaderTextColor(Colors.White);\n\t\t\titem.getPointedStyle().setBrush(new SolidBrush(new Color(100, 100, 100)));\n\t\t}\t\n}<\/pre>\n
The ItemEvent<\/a> class provides the item that was created and you can use the instance to apply any particular styling to the item.<\/p>\n
Here is our scheduler, which now colors the items on weekends in red:<\/p>\n
<\/p>\n
In JavaScript, the items have a special field that allows you to assign to them a custom CSS style that you’ve defined. The style will be applied to the particular item only. The field is called ‘cssClass’<\/a>.<\/p>\n
IV. Custom Drawing<\/strong><\/p>\n
When you need to style in a very unique way calendar elements and nothing else helps, you have the option to draw them the way you want. Custom drawing can be made for many parts of the calendar. The available elements are identified as members of the CustomDrawElements<\/a> enumeration.<\/p>\n
You tell the control that you want to use custom drawing this way:<\/p>\n
\/\/specify that we will use custom drawing\t\ncalendar.setCustomDraw(EnumSet.of(CustomDrawElements.CellContents));<\/pre>\n
The custom drawing must be part of the draw<\/a> method, which is also a member of CalendarListener:<\/p>\n
\/\/ Listen for item creation and for draw events\ncalendar.addCalendarListener(new CalendarAdapter(){\n\t\t\t\t\n\t\t\t\n\/\/add custom drawing to CellContents\n@Override()\npublic void draw(CalendarDrawEvent e) {\n\tonDraw(e);\n\t} \n\t\t\t\n});<\/pre>\n
The event handler method looks like this:<\/p>\n
\/\/apply custom drawing to selected items\nprivate void onDraw(CalendarDrawEvent e)\n{\n\tif (e.getElement() == CustomDrawElements.CellContents)\n\t{\n\t\tDateTime date = e.getDate();\t\t\n\t\t\n\t\t\/\/color in light yellow the background of the first 10 days of a month\n\t\tif (date.getDay() < 11)\n\t\t{\n\t\t\t\/\/ Do the custom drawing\n\t\t\tRectangle2D bounds = new Rectangle2D.Double(\n\t\t\te.getBounds().getX(), e.getBounds().getY(),\n\t\t\te.getBounds().getWidth() - 1, e.getBounds().getHeight() - 1);\n\t\t\tnew AwtGraphics(e.getGraphics()).fillRectangle(Brushes.LightYellow, bounds);\n\t\t}\n\t}\n}<\/pre>\n
The Calendar’s drawEvent class<\/a> gives us useful methods to learn more about the item that is being drawn. In our case we want to draw the cell contents, so we check if draw<\/a> was called for the cell contents, and if yes, we get the bounds of the element. We need the check, because draw is called for all elements that support custom drawing and we need to identify which one is drawn at the moment.<\/p>\n
Thanks to the custom drawing, the monthly schedule now has a light yellow background on the first ten days of the month:
\n<\/p>\n
With this our review of the methods to style a schedule is finished. You can download the complete source code of the sample together with all MindFusion libraries used from this link:<\/p>\n
How to Style a Java Schedule: Download Project Source Code<\/a><\/p>\n
You can post questions about Mindusion Scheduling components at  MindFusion online forums.<\/a><\/p>\n
About MindFusion Scheduling Components<\/i> MindFusion Scheduling components are available for a variety of platforms for web, mobile and desktop programming. All of them include a robust feature set that includes 6 calendar views, predefined themes, various events, predefined forms for creating appointments and recurrence. The components are fully interactive, easy to customize and style and are the ideal choice for any application that needs to implement time management features. You can learn more about MindFusion Scheduling tools at https:\/\/mindfusion.dev\/scheduling-pack.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog post we will look at the different levels of sty\u200cling the elements and items of a schedule made with a MindFusion scheduling library. In our sample we use the Java Scheduling Library, but the API members that … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[535,74,104],"tags":[27,43,452,543,614,44,28,613,8,9,120],"class_list":["post-2236","post","type-post","status-publish","format-standard","hentry","category-java-swing","category-sample-code","category-scheduling-2","tag-calendar","tag-java","tag-java-sample-code","tag-java-scheduler","tag-java-tutorial","tag-library","tag-schedule","tag-settings","tag-style","tag-theme","tag-timetable"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-A4","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2236"}],"version-history":[{"count":2,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2236\/revisions"}],"predecessor-version":[{"id":2650,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2236\/revisions\/2650"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}