![]() JayData is an open-source cross-platform HTML5 library, which helps you to develop enterprise-grade hybrid mobile. A Comparison of Java. Script Calendars and Schedulers — Site. Point. The days are moving fast, and modern people will choose an online schedule app rather than a bunch of sticky notes to organize their life. Online apps can be used on a smart- phone or laptop. And there’s no need to synchronize data between devices. If you want to create your own calendar or scheduler but don’t know where to start, have no fear. This article’s aim is to help you with your decision. Why create your own scheduler instead of using the existing ones? Well, here are some use cases: When you build an Intranet application that should not necessarily have access to the outer web. In this case, you’ll probably want a standalone component that doesn’t require external services and will store data where you want it to. Or if you wish to have a full control over your app and don’t want to rely on external services. When you use a scheduler to visualize and manage data that you already have in your system, and it’s doesn’t necessarily consist of “appointments” that are defined by date/title/description. This data can contain, for example, various entities with a lot of business rules involved. When you need some advanced functionality, that is not supported by Google Calendar. Or when you need to customize the appearance or logic of a component, e. We’ll take a look at three different types of Java. Script calendars: Creating the Scheduler. Before getting started, let’s define what characteristics are valuable for us: Terms of use. Appearance. Usability. Coding complexity. Well, let’s start now.
Kendo UI Scheduler. You should get the full library package to use this scheduler. Alternatively, custom download allows you to choose the modules you want, but you need to have a commercial license to use it. To get the 3. 0- day trial, you need to register by filling a web form or via your social network account. By the way, there’s also a free open- source version of Kendo UI available. It is called Kendo UI Core, and you can check the details on this Git. Hub page. But, unfortunately, the scheduler is not one of its parts. After you extract the library, you can create a basic scheduler. First, include the required files: < link rel="stylesheet" href="styles/kendo. Notice that you should include j. Query before the Kendo UI Java. Script files. The next step is to define the styles. Besides the styling the < html> and < body> tags, you should define the proper style for the scheduler’s container to make it look good in full- screen mode. Now you can use the constructor to initialize the scheduler: < div id="scheduler"> < /div>. Scheduler({. // The current date of the scheduler. Date(). { type: "week", selected: true }. The views property allows you to enable the Day, Week and Month views and choose the initially selected one. This code will create a basic scheduler that is shown below: A double- click will open the new event creation window. Created events are draggable, so you can rearrange them if you need. Another handy feature is a mini calendar that is helpful for navigation through the schedule. The Show business hours/Show full day toggle button will help to filter your work time events from the regular ones. ![]() You can find it at the bottom of the scheduler: The scheduler is intuitive and has all the basic functions you may need. You can create an event and move it through the calendar grid. Additional features such as Mini calendar and Show business hours button are rather handy. That’s all that we can get by default, so let’s move along. Full. Calendar. This calendar is released under the MIT License, so there’s almost no restrictions on how you can use it. There are different ways you can install this calendar: you can use Bower, add the required files to your page via CDNJS, or download the package with Java. Script and CSS files. Check the download page for more details. One more thing before moving forward. Since Full. Calendar is a j. Query plugin, don’t forget to add it to your page. Another dependency is Moment. Java. Script library for working with dates. Here’s how you might include the files in your page in case you use a CDN: < link rel='stylesheet' href='https: //cdnjs. After that, you can define a DIV container that will hold the calendar, define CSS rules if needed and, finally, initialize the calendar. For example, we have a container: < div id='calendar'> < /div>. Here’s what the initialization process looks like: $(document). Calendar({. // calendar properties. As you can see, there’s not much code you need to make this calendar work. And, by default, there are not so many features you can use. Here you can see how the default scheduler looks: This is the month view with the current date highlighted, the possibility to change the displayed month, and a Today button. That’s all. You see, Full. Calendar is some kind of DIY- tool. There’s a lot of handy features you can use, but the default calendar is very basic. It’s a good choice if you want to create minimalistic applications that have only the required minimum of features. Let’s write some code to make our app look and work better: // enable theme. Hours: true. // event dragging & resizing. Week,agenda. Day'. Since we want to use a custom theme, we should add the required CSS file: < link rel='stylesheet' href='./lib/cupertino/jquery- ui. Almost done! The final step is to define some events to render. There are different ways you can define events: as an array, as a JSON feed, and even as a function. Here’s an example: events: [. Meeting'. start : '2. Conference'. start : '2. Dentist'. start : '2. T1. 1: 3. 0: 0. 0'. T0. 12: 3. 0: 0. 0'. Day : false // will make the time show. Now, let’s check the result: Much better this time! Now, you can change the view, drag and resize the existing events, business hours are emphasized, and the week and day views filter all day events from the other ones: Here’s the overall impression of Full. Calendar. It was designed as a lightweight tool that gives you full control over your app. You can create a low- functional basic application and then add the features you want one by one. And there are plenty of them: coloring, events, existing view customization, etc. Check this documentation page for the full list. Scheduler. If you check the download page, you will notice that there is a free Standard Edition available. Moreover, there are two special editions available: the Mobile Version and Windows 8 version. You can buy a PRO Edition if you want to get extended functionality. To create a basic chart you should include some files from the codebase folder to your HTML file: < script src="codebase/dhtmlxscheduler. Now we can define the necessary < div> < /div> sections: < div id="scheduler_here" class="dhx_cal_container" style='width: 1. And finally, we can initialize our scheduler: < body onload="init(); ">. Date(),"week"). The init() method initializes a dhtmlx. Scheduler object. In this case, the scheduler will be initialized within the previously defined scheduler_here container. Date() will set the current date as the scheduler initial date value. The "week" parameter sets the initial view. Its possible values are "day", "week" and "month". Everything is ready, and we can see how the default scheduler looks: By default, there is a possibility to switch between the Day, Week and Month view. Today’s date is highlighted, but if you lose yourself within the schedule, use the Today button. You can create a new event by double- clicking on the proper calendar area. Resizing an event will change its duration. Drag- and- drop event reordering is available as well. To create a long- term event you should use the Details button at the event’s left side. To change its place in your schedule, you should select the Month view. Overall Results. Kendo UI Scheduler. Kendo UI is big and advanced Java. Script framework. It contains tons of widgets and tools. Maybe it’s not a good idea to use its Scheduler Widget if you’re not interested in other components. The Kendo UI documentation is well written, and you can check a bunch of Scheduler demos supplemented with code examples. Regarding the coding, it won’t take much time to build a basic scheduler and add some features to it. The default view is little bit plain, but it’s easy to change that. Full. Calendar. This is a good choice for those who know what they want. There are no detailed step- by- step guides that describe what to do to get the goal.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
October 2017
Categories |