Event and Booking Calendars Creation in ASP.NET | CodeAsp.Net

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.

Why DHTMLX Scheduler .NET

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:

• ASP.NET MVC (C#, VB), including MVC3/MVC4
• ASP.NET WebForms (C#, VB)

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: 

• Intuitive drag-and-drop UI
• Multiple views
• Multiple Schedulers
• Recurring events support
• Built-in date picker
• Export to PDF/iCal
• Integration with Google Maps
• Integration with Google Calendar and Outlook
• Marking and blocking time sections
• Highlight pointer and ‘Create-on-click’ events
• Events filtering
• Time zone conversion
• Tooltips
• Live Update
• Events auto-save and auto-update
• Touch Support
• JQuery validation
• Localization to over 25 languages

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.

MVC3 Tutorial: Simple Event Calendar in 6 Steps

Step 1.  Creating a New MVC3 Project

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.

Step 2.  Set up the Database

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.

Step 3.  Scheduler .NET Installation via NuGet

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.

Step 4. Create a Data Model

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.

Step 5. Update a Controller

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));
       }
   }
}

Step 6. Rendering the View

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.

Free Booking Demos

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:

• User authorization form to allow bookings only by logged in users;
• Privacy settings to allow every authorized user to access only his events, which he can modify or delete;
• Frozen events that can’t be edited or deleted if expired;
• Rooms selection that allows to select only one room for one event;
• Highlighting to set different text colors to bookings made by different users;
• Rooms view in addition to Agenda, Week and Month views;
• Bookings cascade view to display different rooms overlapping in time;

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: 

• Convenient timeline view of car brands:

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. 

• User-friendly search field

It allows checking car availability, browse and select car types and prices, set pick up and drop off dates.

• Rent period indication

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.

Conclusion

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/