Styling The Timetable View in JavaScript Scheduler

In this blog post we are going to look at the most common adjustments in the appearance of a timetable that developers want to make based on the questions we have received regarding MindFusion Scheduler library for Java Script.

Here is how our timetable will look at the end:

Styling the Timetable View in JS Scheduler

I. General Looks

The overall appearance of the scheduling library is controlled by themes. MindFusion Scheduler comes with a collection of 9 predefined themes. In order to apply a theme you need to:

  • add a reference to the CSS file in the web page where you want the calendar to appear:
    <link rel="stylesheet" type="text/css" href="themes/gray.css">
  • assign the name of the theme to the theme property of the Calendar class:
    calendar.theme = "gray";
  • Themes can change dramatically the color scheme of the control including the forms that appear for item creation. We recommend that you choose the theme that is most closely related to the colors you want to see and customize it, if necessary.

    Themes in the JavaScript Scheduler

    Each of the themes is in a CSS file and you can search by the color code and replace the occurrences of a given color with another one to fine-tune the color scheme.

    II. Timetable Settings

    Initially, a timetable renders only one day – today. The timetableSettings property, just like the *settings properties for all views supported by the Calendar (—SingleMonth, RespurceView, MonthRange etc.) expose the properties that let you customize the look of the calendar.

    In the case with the timetableView, the number of columns that are rendered depends on the number of dates added to the dates propеrty of timetableSettings In our case we want to show the week, so we add 7 dates:

    //get the current date
    var currDay = schedule.DateTime.today();
    calendar.timetableSettings.dates.clear();
    
    for (var i = 1; i < 8; i++) {
    	calendar.timetableSettings.dates.add(currDay.addDays(-1 * currDay.dayOfWeek + i));	
    	}
    }

    Setting the Number Of Dates in a Timetable in the JavaScript Scheduler

    We also want to scroll week by week. By default the timetable scrolls with one day. In order to scroll more you need to set the scrollStep property to a bigger number:

    calendar.timetableSettings.scrollStep = 7;

    The next thing that we need is to change the time scale. We want the scales to be per 20 minutes and we want to cover the time interval from 10 to 16 o’clock. These is regulated with the startTime and endTime fields of timetableSettings These properties take as an argument the number of minutes. So, if you want your day to start at 8 o’clock your start time needs to be 8×60=480 minutes or you need to assign 480 as value to the startTime property.

    // set the start time to 10:00 AM
    calendar.timetableSettings.  = 600;
    // set the end time to 16:00 PM
    calendar.timetableSettings.endTime = 1020;

    What we want to specify is the format of the header. The default format is based on the locale settings of the user that runs the application. In our application the date in the timetable header renders as DD/MM/YYYY. We will use the titleFormat property. We also use cellTime to change the time scales between each two hours. The default value is 30 minutes. We change it to 20 with the cellTime property.

    calendar.timetableSettings.titleFormat = "d MMMM 
     dddd";
    calendar.timetableSettings.cellTime = schedule.TimeSpan.fromMinutes(20);
    calendar.timetableSettings.cellSize = 20;

    Adjusting the Timetable Settings in the JavaScript Scheduler

    We also increase the cell size – this is the height of rows that are defined by each 20-minute interval. The calendar also shows just one header – that with the dates. We want to render the days header, which shows the day of the week. The property for that is showDayHeader

    calendar.timetableSettings.showDayHeader = true;

    III. CSS Styling

    We’ve customized our timetable as much as we could through the properties and fields of the Calendar control. We would like to add some additional styling, which can be done through css. We use the style inspector of the browser to identify the styles that are applied on the elements that interest us. We would like to show the lines that separate 20 minute cells in yellow and the lines that separate hours in red. Let’s start with the hour lines. The css to render them in red is this one:

    .mfp-timetable-view .mfp-content .mfp-column .mfp-cell-wrap:nth-child(3n+1) .mfp-cell { 
    			border-top: 1px solid red; 
    }

    The class that styles cells is called mfo-cell-wrap. This class regulates the styling for all cells, so we need to apply red border only on the cells that interest us, and they are the 1st, 4th, 9th etc. cell. We want the rest of the cells to be yellow. This is done with the CSS “not” keyword:

    .mfp-timetable-view .mfp-content .mfp-column .mfp-cell-wrap:not(:nth-child(3n+1)) .mfp-cell {  
    			border-top: 1px solid yellow; 
    	}

    This colors the rows of the timetable red/yellow but does not color the delimeters between the time scales. They are regulated by another CSS class and are div elements:

    .mfp-timetable-view.gray .mfp-header-timeline .mfp-group-time div:not(:first-child)
    	{
    
    		border-top: solid 1px yellow;
    	}
    		
    	.mfp-timetable-view.gray .mfp-header-timeline .mfp-hour
    	{
    		border-top: solid 1px red;
    	}

    Note that the CSS style names are with the suffix “gray”. This is the name of the theme. In many cases the class that needs to be changed is bound to a certain theme.

    The last thing that we want to add as styling is a background for the weekend days. We use again the nth-child CSS property. This time the “children” are the 6th and 7th element, so we define styles for them:

    .mfp-timetable-view .mfp-content .mfp-column:nth-child(5n + 6), .mfp-column:nth-child(5n + 7) {
    			background-color: rgba(145, 179, 188, 0.4);
    		}

    We note one more thing. When we create an appointment, the text of the subject is not visible because the line height is too small for the item styling. We have two options: either to increase the cell height, which is set with cellSize and is 20 or to style the item, so that the subject is visible. We choose the latter. We will make the resize line-s smaller because that’s what hiding the subject: the big resize lines:

    .mfp-item-vertical-detail .mfp-subject {
    	flex-shrink: 0 !important;
    }
    
    .mfp-item-vertical-detail .mfp-resize-start,
    .mfp-item-vertical-detail .mfp-resize-end {
    	flex-shrink: 1 !important;
    }

    Here is the final result:

    Styling the Timetable Vew in JS Scheduler

    You can download the sample with all libraries ued and the full source code from this link:

    Styling a Timetable in the JavaScript Scheduler

    You can post technical questions, comments and recommendations about MindFusion Scheduling for JavaScript at the library online forum.

    About Scheduling for JavaScript: MindFusion Js Scheduler is the right solution for all applications that need to render interactive timetables, rich event calendars, lists with appointments or resources. Fully responsive, highly customizable and easy to integrate, you can quickly program the JavaScript scheduling library according to your needs. The library supports a variety of export options, styling through themes, 6 calendar views and much more. Find out more at https://mindfusion.eu/javascript-scheduler.html

    The Different Ways to Style a Schedule

    In this blog post we will look at the different levels of sty‌ling 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.

    I. Top Level: Theme

    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:

    calendar.setTheme(ThemeType.Vista);

    Here is what the calendar looks like styled with the vista theme:

    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.

    You have the option to create a custom theme, which you can save and apply this way:

    calendar.setCustomTheme(new MyTheme());

    Another way to apply the custom theme in Java Scheduling is:

    calendar.setCustomTheme(new MyTheme());

    Here is the look of the calendar with the custom theme:

    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.

    Creating a custom Theme requires that you override a strict set of methods. They are the public members of the Theme class. You should override all of them. Among the methods that style the calendar for each view – getMonthRangeSettings getMonthSettings 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:

    private void initialize_MyTheme_ListViewSettings()
    {
    	_listViewSettings = super.createListViewSettings();
    }

    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.

    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 that looks closest to what you want to have as a structure and modify it.

    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.

    II. View and Item Settings

    One level down the tree are the view settings properties. They are available for any view. You can access those settings with the getMonthSettings getMonthRangeSettings 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:

    //set the view to SingleMonth
    calendar.setCurrentView(CalendarView.SingleMonth);
    //get the styling settings for SingleMonth view
    calendar.getMonthSettings().getDaySettings().setTodayFillColor(Color.green);

    You can style the items, regardless of the view used, with the ItemSettings object:

    calendar.getItemSettings().setPadding(20);

    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 instances. Thus, if you want to change the color of items, you will use:

    //customize just the items through the itemSettings field
    calendar.getItemSettings().setPadding(20);
    		
    Style itemStyle = new Style();
    itemStyle.setBrush(new SolidBrush(Color.white));
    itemStyle.setHeaderTextColor(Color.DARK_GRAY);		
    itemStyle.setHeaderTextShadowStyle(ShadowStyle.None);
    calendar.getItemSettings().setStyle(itemStyle);

    This styles all items on the calendar. For styling a particular item, you should use on of the methods listed underneath.

    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.

    III. Using Events to Style Particular Items

    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 event, where we check if the start date of an appointment happens to be during the weekend:

    // Listen for item creation and for draw events
    calendar.addCalendarListener(new CalendarAdapter(){
    	//apply custom styling to selected items
    	public void itemCreated(ItemEvent e) {
    		onItemCreated(e);
    	}				
    });

    The Java Scheduler provides various events, which are accessible through a CalendarListener and CalendarAdapter instances. We handle the itemCreated event this way:

    //color in red events that are scheduled to start on weekends
    protected void onItemCreated(ItemEvent e) {
    
    	Item item = e.getItem();
    	if(item.getStartTime().getDayOfWeek() == DayOfWeek.Saturday || 
    		item.getStartTime().getDayOfWeek() == DayOfWeek.Sunday)
    		{
    			item.getStyle().setBrush(new SolidBrush(new Color(213, 28, 32)));
    			item.getStyle().setHeaderTextColor(Colors.White);
    			item.getPointedStyle().setBrush(new SolidBrush(new Color(100, 100, 100)));
    		}	
    }

    The ItemEvent class provides the item that was created and you can use the instance to apply any particular styling to the item.

    Here is our scheduler, which now colors the items on weekends in red:

    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’.

    IV. Custom Drawing

    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 enumeration.

    You tell the control that you want to use custom drawing this way:

    //specify that we will use custom drawing	
    calendar.setCustomDraw(EnumSet.of(CustomDrawElements.CellContents));

    The custom drawing must be part of the draw method, which is also a member of CalendarListener:

    // Listen for item creation and for draw events
    calendar.addCalendarListener(new CalendarAdapter(){
    				
    			
    //add custom drawing to CellContents
    @Override()
    public void draw(CalendarDrawEvent e) {
    	onDraw(e);
    	} 
    			
    });

    The event handler method looks like this:

    //apply custom drawing to selected items
    private void onDraw(CalendarDrawEvent e)
    {
    	if (e.getElement() == CustomDrawElements.CellContents)
    	{
    		DateTime date = e.getDate();		
    		
    		//color in light yellow the background of the first 10 days of a month
    		if (date.getDay() < 11)
    		{
    			// Do the custom drawing
    			Rectangle2D bounds = new Rectangle2D.Double(
    			e.getBounds().getX(), e.getBounds().getY(),
    			e.getBounds().getWidth() - 1, e.getBounds().getHeight() - 1);
    			new AwtGraphics(e.getGraphics()).fillRectangle(Brushes.LightYellow, bounds);
    		}
    	}
    }

    The Calendar’s drawEvent class 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 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.

    Thanks to the custom drawing, the monthly schedule now has a light yellow background on the first ten days of the month:

    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:

    How to Style a Java Schedule: Download Project Source Code

    You can post questions about Mindusion Scheduling components at MindFusion online forums.

    About MindFusion Scheduling Components 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.eu/scheduling-pack.html.

    Scheduling for WinForms, V5.5

    MindFusion has released a new version of its Scheduling component for WinForms. Here is an overview of the new features:

    Visual Studio 2013 Support
    The component’s installer can create a toolbox palette in VS2013 and can optionally install VS2013 sample projects.

    Improved Support for Non-Gregorian Calendars
    The control provides better support for non-Gregorian calendars, such as Hijri. You can display the Persian calendar through the new PersianCulture. In order to specify the calendar to be used by MindFusion.Scheduling, assign a culture that uses this calendar to the Culture property of the Calendar class.

    New Holiday Provider
    You can use the new AustraliaHolidayProvider (available in the MindFusion.HolidayProviders.dll assembly) to supply the major holidays in Australia for a specific time interval.

    A sample calendar with holidays.

    A sample calendar with holidays.

    The trial version of the control is available from the link below:

    Download MindFusion.Scheduling for WinForms 5.5

    If you have questions about the component, please use the support e-mail or the help desk. MindFusion takes special efforts in providing fast and competent answers to all support inquiries we receive.

    About MindFusion.Scheduling for WinForms: MindFusion.Scheduling for WinForms is a programming component that adds to your .NET application powerful features for creating and customizing any type of schedule, calendar, time table, resource table and many more. The tool supports six data views, input/output from/to a variety of data sources and rich user interaction model. Scheduling for WinForms offers various auxiliary forms for creating and editing appointments, tasks and events. A theme editor for creating custom themes is also available. The control features a rich variety of predefined themes and various item effects.

    You can read more about Scheduling for WinForms at its features page. Visit the gallery page to see screenshots of various calendars and schedules created with the tool. For more information about licenses and prices go to the buy page.

    Custom appearance of WPF Resource view

    Continuing from the previous post we will now customize the appearance of the Resource view to achieve a more aesthetically pleasing presentation. The appearance of the view is customized by setting various properties of the Calendar.ResourceViewSettings object.

    We will build our presentation on the Silver theme by reducing the sharpness and contrast of colors and making the font uniform across the entire view. The customization process is divided to the following steps:

    Customize the view background.

    calendar.ResourceViewSettings.CalendarStyle.Background = Brushes.White;

    Customize the row headers.

    calendar.ResourceViewSettings.ExpandableRows = false;
    calendar.ResourceViewSettings.HeaderStyle.FontFamily = headerFont;
    calendar.ResourceViewSettings.HeaderStyle.FontSize = 13;
    calendar.ResourceViewSettings.HeaderStyle.Foreground = new SolidColorBrush(Color.FromArgb(255, 64, 64, 64));
    calendar.ResourceViewSettings.HeaderStyle.Background = Brushes.White;
    calendar.ResourceViewSettings.HeaderStyle.BorderBrush = borderBrush;
    calendar.ResourceViewSettings.HeaderStyle.BorderThickness = new Thickness(0, 0, 0, 1);

    Customize the view cells.

    calendar.ResourceViewSettings.CellStyle.Background = Brushes.White;
    calendar.ResourceViewSettings.CellStyle.BorderBrush = borderBrush;
    calendar.ResourceViewSettings.WeekendStyle.Background = new SolidColorBrush(Color.FromArgb(255, 250, 250, 250));
    calendar.ResourceViewSettings.WeekendStyle.BorderBrush = borderBrush;

    Customize the view timelines.

    calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.Background = Brushes.White;
    calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.BorderBrush = borderBrush;
    calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontFamily = headerFont;
    calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontSize = 13;
    calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontWeight = FontWeights.Normal;
    calendar.ResourceViewSettings.BottomTimelineSettings.NowFillBrush = Brushes.Transparent;
    calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.Background = Brushes.White;
    calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.BorderBrush = borderBrush;
    calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontFamily = headerFont;
    calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontSize = 13;
    calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontWeight = FontWeights.Normal;
    calendar.ResourceViewSettings.MiddleTimelineSettings.NowFillBrush = Brushes.Transparent;

    Note that the font, headerFont and borderBrush variables are defined as follows:

    FontFamily font = new FontFamily("Segoe UI");
    FontFamily headerFont = new FontFamily("Segoe UI Light");
    Brush borderBrush = new SolidColorBrush(Color.FromArgb(255, 224, 224, 224));

    The final result is displayed below.

    scheduling-resourceviewappearance

    The complete sample project is available for download here:
    http://mindfusion.eu/_samples/WpfPlannerResourceViewAppearance.zip

    You can get the trial version of MindFusion.Scheduling for WPF from this link:
    http://mindfusion.eu/WpfPlannerTrial.zip

    Enjoy!

    Custom items in WPF Calendar

    Expanding on the previous post we will now modify the appearance of the calendar items through the use of a custom item presenter. To define the new presenter, simply create a new Style resource with TargetType set to ItemPresenter and place this Style somewhere in the resource look-up path – for example in the application’s or the window’s resource dictionaries. The Style must contain a setter for the Template property that defines the appearance of the item:

    In this particular case the presenter represents a grid with two rows. The top row contains an icon and the header text of the item. The bottom row contains the description text. Note, that the TextBlock displaying the header text of the item has a name – HeaderBlock. The element with this name defines the position of the TextBox when the item is in-place edited.

    Various appearance properties are also customized – such as FontFamily, Background and BorderBrush, by assigning new values to the respective properties of the Calendar.ItemSettings.CalendarStyle object:

    calendar.ItemSettings.CalendarStyle.FontFamily = new FontFamily("Segoe UI");
    calendar.ItemSettings.CalendarStyle.Background = Brushes.White;
    calendar.ItemSettings.CalendarStyle.BorderBrush = Brushes.SlateGray;

    Finally, the size of the calendar lanes is increased to accommodate the new appearance of the items:

    calendar.ResourceViewSettings.LaneSize = 54;

    The final result is displayed below.

    scheduling-customitems

    The complete sample project is available for download here:
    http://mindfusion.eu/_samples/WpfPlannerCustomItems.zip

    You can get the trial version of MindFusion.Scheduling for WPF from this link:
    http://mindfusion.eu/WpfPlannerTrial.zip

    Enjoy!