There are a lot of reasons why you might want to use a calendar script on your website. Most common among them is for listing and scheduling events. Another use would be to provide a link to list all the blog posts or news events published on a particular day. In some cases, you might simply be looking for a date and time range picker.
- HTML515 Best HTML5 Audio PlayersEric Dye
- HTML520 Best HTML5 Game Templates of 2018 With Source CodeEric Dye
- HTML515 Best HTML5 Video PlayersEric Dye
Simple Events Calendar
The first script in our list is the highly rated Simple Events Calendar. It is based on jQuery and supports multiple languages.
The first thing that you will notice about this plugin is its very simple yet attractive design. All the days in a month are shown at the top with a small font to save space, and the selected date is shown with a bigger font.
The events for the selected date are shown at the bottom. Users can sort the events based on their time, title, or priority. All the days which have an event attached to them are marked with an arrow so that you can easily see which days are currently empty and make your schedule accordingly.
You can create recurring events with this script. This means that you can easily add events which are repeated weekly, monthly, or yearly.
The script also gives you access to some methods and event callbacks to extend the functionality of the calendar or to help you integrate it with the rest of your website.
You can try out all the features of the plugin on the demo page, which also provides a quick installation guide.
DZS jQuery Mini Events Calendar
It is easy to set up and comes with detailed documentation to help you in case you get stuck. It is also highly customizable and SEO-friendly.
There are a variety of modes and skins available for you to use based on your needs. Some events that you mark on a calendar will be more important than others. You can easily differentiate between important and regular events with the important tag. The plugin shows important events with a red color and regular events with a blue color.
Another plugin called the DZS tooltips plugin is already integrated with this script to provide a better user experience. The tooltips that you create can have HTML inside them, which makes them very powerful and flexible. You will basically be able to add any type of content (even videos) inside the tooltips.
There are three different skins available for this calendar, called clean, aurora, and black. You can choose a skin that works best with your theme, and you also have the option to show the events as a tooltip or with a slick sliding animation.
The script can also work in two other modes besides an events calendar. Its first mode is a simple date picker. The second mode is more interesting as it allows you to select a date and then show any linked items from that date—for example blog posts.
Don't forget to check out the demo page of the script. I am sure you will like the features offered in the plugin.
Tiva Events Calendar
Tiva Events Calendar offers a unique and simple solution for keeping track of different events in your schedule.
This script is different from the first two event calendars. You might have noticed that both Simple Events Calendar and DZS jQuery Events Calendar only mark the date of the event on the calendar. No other information is provided to you beforehand. This means that you have to click on a date to actually see the event.
The compact layout in this plugin also works in a similar manner and only shows the events once you hover over the date. However, the full layout of the plugin also displays the title of the events so that you don't have to click on each date to see the events of the day. However, you can still click on the events to see more detail about them.
Another nice feature of the script is that the events are color coded. You will be able to assign different colors to different types of events, like parties or business meetings. This makes it easier to get an overview of the schedule with a single glance at the calendar, again without having to click on each date.
Both the full layout and the compact layout contain a calendar view and a list view. The calendar view will show you all the days of the month like a regular calendar. The list view, on the other hand, simply lists all the events of the month. You can see all of this in action on the demo page.
Calentim: Date Time Range Picker
Unlike the other plugins in the list, the Calentim Date Time Range Picker is not an event calendar plugin at all, and just focuses on being an awesome date time range picker.
With its narrow focus, the plugin can afford to offer a lot of features in this particular niche. One of the best things about the script is that the picker looks great on devices of all screen sizes.
It is mobile-friendly because of its responsive design and its use of gestures like touch slide support. For example, it is very easy to switch between months and years due to the well-thought-out design of the plugin.
It is also easy to customize, so you can hide any UI elements and disable features that you don't need.
The plugin supports 109 different languages. This basically means that the script most probably comes with built-in support for the language that your clients use.
There are many other features in the script that are mentioned on the demo page of the plugin. Just try out the examples on the page. I am certain that you'll find all the features you expect in a date range picker calendar plugin.
Jalendar 2 Calendar Kit
The Jalendar 2 Calendar Kit is a jQuery-based plugin that offers a lot of different features. One of its biggest plus points is the ease of customization. For instance, you can quickly change the color of the calendar's background as well as the color of the days, weeks, or year. This means that the plugin will never look out of place on your website. You can easily change all the color values to make them match your color scheme.
The total number of events in each month are shown with notification bubbles, and the dates are marked with small colored dots. Clicking on a date shows all the events for that particular day.
You can use the plugin in four different ways. You can use it as an event calendar, date picker, or date range selector, and the fourth use of the plugin is as a date linker—this lets you assign different dates to different links. This can be useful when you want to let users open the blog posts for a particular day.
One more nice feature of this script is its support for 13 different languages. If your clients don't know English, there are 12 more languages that you can choose from when creating the events calendar.
Hubeleke jQuery Events Calendar
The Hubeleke jQuery Events Calendar is, again, different from all the plugins we have looked at so far. It can connect with your database and fetch all the events of the selected date to show on your webpage.
All the dates which have an event attached to them are marked with a colored background. Minimal styling has been applied to the calendar, so it is easy to style it according to your own needs.
If you want to extend the functionality of the plugin, there are a number of properties and events you can access. For instance, there are events like
onClickDay which help you do something specific when a user clicks on a particular month or day.
You should check out the demo page of the plugin to see how it works and read about its different features in more detail.
If you are simply looking for a date and time picker, the best plugin for you would be the Calentim—Date Time Range Picker. If you are looking for a plugin that can fetch events from your database in the background, you should buy the Hubeleke jQuery Events Calendar plugin. The rest of the scripts mentioned in the post are a good choice if you are looking for an event calendar plugin that offers many different layouts and customization options.
- HTML515 Best HTML5 Audio PlayersEric Dye
- jQuery20 Best jQuery Image SlidersEric Dye
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post