There’s plenty of calendar controls with different functionalities offered on the web nowadays. Calendar developers are trying to prove that their calendars are most customizable, most attractive, easy-to-use, and super full-featured. Because of the abundance, it is sometimes really hard to make a decision without hesitation and choose the most suitable calendar control for your project. So you have to spend hours and hours searching, studying features, discussing them on forums, and consulting your friends and colleagues. With this article, we make a promise to save up your precious time. Proceed reading to learn how you can benefit from using the DHTMLX Scheduler .NET and create a simple event calendar for your ASP.NET app.
While choosing an event calendar for your project, you probably consider its look and feel and pricing first of all. Then you go deep into its functionality and check the availability of effective customer support. In this case, DHTMLX Scheduler .NET calendar control is beneficial in all ways.
Released by the innovative and reputable DHTMLX software development company last year, Scheduler .NET proved to be an effective tool for solving complex scheduling issues.
It is a Google Calendar alternative specially created for ASP.NET application needs.
The control is marked by simplicity in use that is of a great advantage especially to newbies. Basic knowledge of C# or Visual basic would suffice.
DHTMLX Scheduler .NET supports the following frameworks:
The web control is created in MS Visual Studio 2008 and above in any of the available views (MVC3 Razor view engine or ASPX).
With Scheduler .NET, you can easily create a nice looking event calendar with a preferable skin/color scheme:
The full-featured event calendar includes:
In the next part of the article you will learn how to create an event calendar in ASP.NET MVC3 in C#. By following this tutorial you will get a calendar with a number of basic features and classical look and feel. The process of creation will take you less than 10 minutes.
First of all, you have to create a new project in Visual Studio 2012. Select ASP.NET MVC 3 Web Application from the installed templates. We’ll make it a C# web project. Let’s name it MyCalendar. In the new opened window use the default settings: Empty template and Razor view engine.
All calendar events are stored in a database. Let’s create it and customize accordingly. Right-click on the App_Data folder in the Solution Explorer to add a new item. Choose SQL Server Database and name it “MyCalendar.mdf”.
Then go to the Server Explorer and add a new table “Event”. Fill it in as follows:
NOTE When you create a new table, primary key is set to id (double check id is put in small letters).The identity column should be enabled additionally.
Refresh the project to apply the changes.
To install DHTMLX Scheduler .NET right-click on your project folder and select Manage NuGet Packages. Type “dhtmlx” in the quick search. Select “DHTMLX.Scheduler.MVC3.Sample” from the list.
This package installs a controller CalendarController.cs , a calendar page Index.cshtml and a sample model CalendarEvent.cs . The latter can be deleted.
Go to the Solution Explorer and right-click on the Models to add a new item. Choose
LINQ to SQL Classes and name it Calendar.dbml. Now drag the table “Events” to the designer’s surface. The Model is ready.
The controller was created when we installed the Scheduler MVC3 sample.
It works with static data and provides templates for data load and save. At this step we need to connect the controller with the newly created model and update data load and save correspondingly. Open CalendarController.cs and make the following changes:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DHTMLX.Scheduler; using DHTMLX.Common; using DHTMLX.Scheduler.Data; using MyCalendar.Models; namespace MyCalendar.Controllers { public class CalendarController : Controller { public ActionResult Index() { var scheduler = new DHXScheduler(this); scheduler.Skin = DHXScheduler.Skins.Terrace; scheduler.InitialDate = new DateTime(2012, 09, 03); scheduler.Config.multi_day = true;//render multiday events scheduler.LoadData = true; scheduler.EnableDataprocessor = true; return View(scheduler); } public ContentResult Data() { var data = new SchedulerAjaxData( new CalendarDataContext().Events ); return (ContentResult)data; } public ContentResult Save(int? id, FormCollection actionValues) { var action = new DataAction(actionValues); var changedEvent = (Event)DHXEventsHelper.Bind(typeof(Event), actionValues); var data = new CalendarDataContext(); try { switch (action.Type) { case DataActionTypes.Insert: // define here your Insert logic data.Events.InsertOnSubmit(changedEvent); break; case DataActionTypes.Delete: // define here your Delete logic changedEvent = data.Events.SingleOrDefault(ev => ev.id == action.SourceId); data.Events.DeleteOnSubmit(changedEvent); break; default:// "update" // define here your Update logic var eventToUpdate = data.Events.SingleOrDefault(ev => ev.id == action.SourceId); DHXEventsHelper.Update(eventToUpdate, changedEvent, new List<string>() { "id" });//update all properties, except for id break; } data.SubmitChanges(); action.TargetId = changedEvent.id; } catch { action.Type = DataActionTypes.Error; } return (new AjaxSaveResponse(action)); } } }
To render the view, we change the default route in Global.asax from ‘Home’ to ‘Calendar’ as it is shown below:
routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Calendar", action = "Index", id = UrlParameter.Optional } // Parameter defaults );
That's it! A simple event calendar is created and ready to use.
NOTE The calendar created by this tutorial allows quick adding, modifying, editing, and deleting of events. It has day/week/month views and a convenient drag-and-drop UI. You can add more features to your event calendar by customizing the Scheduler configuration in accordance with your application needs.
The powerful capabilities of DHTMLX Scheduler .NET web control has been demonstrated in the recently released room booking calendar and car rental applications.
The room booking calendar can be effectively applied by hotels, hospitals, companies, or anyone else who needs an online reservation feature.
It includes the following features:
The car rental application represents a full-featured service offering quick car rentals.
As you can see on the screenshot above, DHTMLX Scheduler .NET was significantly modified and got some valuable features:
The conventional timeline view of the Scheduler .NET has been successfully amended to meet the car rental needs. Now it allows the display of the available car brands.
It allows checking car availability, browse and select car types and prices, set pick up and drop off dates.
To define the time of rent, car rent boxes can be signed with the rent duration period.
Both the booking calendar and the car rentals are free Scheduler .NET extensions available for download as separate packages for eager users.
Access DHTMLX Scheduler .NET website to learn more about the booking extensions and other possibilities offered by this web control.
In this article we have highlighted the essential features and functions of the DHTMLX Scheduler .NET web control. Besides, we demonstrated practically how to create a simple event calendar for ASP.NET. You’ve learnt how the calendar functionality can be extended to create adaptable and cost-effective booking services.
DHTMLX Scheduler .NET is a constantly developing tool. It is kept up-to-date and answers the scheduling demands of the ever-expanding ASP.NET world. It’s highly competitive in terms of quality/price ratio and is a good choice for those who value their time and efforts.
About DHTMLX
DHTMLX is a software development company specializing in web application frameworks that combine innovative functionality with ease of use. DHTMLX delivers a comprehensive JavaScript component library and HTML5 framework for mobile web apps. For more information, visit the company’s official website: http://dhtmlx.com/