{"id":4975,"date":"2018-05-17T18:10:00","date_gmt":"2018-05-17T14:10:00","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=4975"},"modified":"2023-05-05T12:50:13","modified_gmt":"2023-05-05T09:50:13","slug":"dhtmlxscheduler-5-0-material-design","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxscheduler-5-0-material-design\/","title":{"rendered":"dhtmlxScheduler 5.0 Major Update with Modern Material Design Look"},"content":{"rendered":"

The highlight of Scheduler\u2019s<\/a> major release 5.0 is, obviously, its stylish and trendy Material Design look. But that\u2019s not the only great news we have! Another outstanding feature of the release is a major CSS overhaul. Now dhtmlxScheduler allows you to modify the existing skins in a simple way or even create new custom skins for your calendar apps on your own. Server-side integration also became much easier due to improved REST support with updated client-side API and documentation.<\/p>\n

Meet dhtmlxScheduler 5.0 and learn all about the release in our blog post. Or cut it short and try out version 5.0<\/a> right now.<\/p>\n

On Trend with Material Design<\/h5>\n

Inspired by Google Material Design patterns we’ve arrived at a complete redesign of our event\/booking calendar component to give it a modern and trendy look and feel. Our new Material skin presents a much clearer and more vibrant user interface:<\/p>\n

\"MaterialCheck Material Skin Sample ><\/a><\/p>\n

Bright and pure colours of events and other elements enrich the impression of using the calendar. We bet that skin would be one of your favourites!<\/p>\n

Besides changing the colour palette, there have been some UX enhancements in switching the time period (days, weeks, months) and filling in the event details form. To make your calendar even more Google-like you may also add an orange button in the bottom right corner of the screen. Pressing the button will trigger a lightbox to pop up, where end users will enter event details.<\/p>\n

\"Adding<\/p>\n

UI\/UX improvements covered all the Views as well:<\/p>\n

\"YearCheck Year View Sample ><\/a><\/p>\n

\"AgendaCheck Agenda View Sample ><\/a><\/p>\n

While Material skin has been introduced, we’ve removed 2 older skins, Glossy and Classic ones.
\n*Please, note that if you’d like to keep on using these skins, you’ll need to stick to relevant CSS files from older versions of the calendar. Otherwise, you’re welcome to migrate to another skin. <\/em><\/p>\n

In connection with dhtmlxScheduler redesign, the update 5.0 also caused a grand CSS refactoring. Now you can take advantage of vastly renewed Scheduler styles for building your apps. <\/p>\n

Check all the details regarding migration and CSS refactoring in our migration guide<\/a>.<\/p>\n

Skin Customization<\/h5>\n

On top of all, version 5.0 provides you with a unique opportunity to create your own custom skins for calendar apps. From now on, style files will be included in dhtmlxScheduler package. On the basis of these files you can rebuild existing skins tailoring them entirely to your needs or even create a brand-new skin to convey an exclusive look and feel in your app. Our skin customization article<\/a> will guide you through all the steps of this process.<\/p>\n

Smooth Server-Side Integration<\/h5>\n

Now using dhtmlxScheduler with back-end technologies became really easy. Version 5.0 adds some long-awaited improvements to the dataProcessor module, which enables a simple connection with RESTful backends. For your convenience we’ve also updated documentation on server-side integration<\/a>, which now covers all request and response formats for dhtmlxScheduler\u2019s communication with the backend. This will help you to implement your backend API on any platform or to move from dhtmlxConnector to a more flexible custom implementation.<\/p>\n

What Else?<\/h5>\n

Apart from groundbreaking changes mentioned above, dhtmlxScheduler 5.0 involves a number of other essential improvements:<\/p>\n