C1Calendar Migration: Palomino to Wijmo

This article is meant to be a guide to assist in the migration of the ASP.NEt AJAX C1Calendar control to the lates WIjmo controls. One of the staple controls of our ASP.NET web stack is the C1Calendar control that is available in our Studio for ASP.NET AJAX control suite. This control is a very robust and intuitive control which gives you several customization options such as theming and culture settings. We have improved upon this control with a brand new C1Calendar control included in the totally redesigned Studio for ASP.NET Wijmo. The new control is built upon a foundation of AJAX, CSS3, HTML5 and JQuery. Basically the new C1Calendar control is built for whatever the future of the web holds. The new control offers CSS support which allows you to use CSS to customize the control to be uniform with your current business standards.

Prerequisites

Before we get started, we will need to download a copy of the new Studio for ASP.NET Wijmo suite of controls if you have not already. There is a fully functioning trial version available for download here. Studio for ASP.NET Wijmo is also available as a part of the Studio Enterprise control suite and the Studio Ultimate control suite as well. This article assumes that you already have Studio for ASP.NET AJAX controls installed on your machine. You will need them as well.

Getting Started

Let's get started. For the purpose of this article, I will be creating a basic web application that utilizes the older AJAX C1Calendar control in Visual Studio so that we have a base application to migrate. If you do not have these older controls, they are available for download here. In Visual Studio, select New>Project from the file menu to open the "New Project" dialog window. In that window under either C# or Visual Basic, highlight the "web" option in "Installed Templates" and choose ASP.NET Empty Web Application. Once your project is created, we will need to add an aspx page to the project. To do this right click your project name and select "Add New Item". In the "Add New Item" dialog box, select "Web Form" and name it whatever you like. I named mine "Default" for the sake of this article. Once that is finished, we can get to the fun stuff. Right click your aspx page and select "View Designer" which will bring up the designer page where we will be dragging controls onto from the toolbox. In order for any of the AJAX controls to fucntion, we need to drag and drop a "Script Manager" onto the page. This control can be found under the "AJAX Extensions" tab in the VS toolbox. Once you have done this, you can now drag your C1Calendar control to the page. Once this has been completed, your page should resemble this. With the ASP.NET AJAX C1Calendar, there are some good customization options that you can take advantage of. Let's take a look at the customization options in the task menu so we can compare them to that of the ASP.NET Wijmo C1Calendar later in this article. Navigate to the task menu of the AJAX C1Calendar and notice that there are several options that you can change from this menu. For migration purposes we are going to make some property changes from the task menu. The first thing we will do is change the culture of the AJAX C1Calendar from the default, en-US to es-AR. Doing this will change the language and the format of the C1Calendar as you can see in the screenshots below. You will notice that the days of the week are also updated accordingly as well as the format of the date in the header. Another property to take notice of in the task menu is the visual style property. This property allows you to apply various theming options to the C1Calendar. In the AJAX C1Calendar, there are 5 theming options available to you. Let's go ahead and change that property to Vista. You will see in a moment that there are many more theming options in the new Wijmo C1Calendar control. Now run the application and take a look at the results. Now let's have a look at the ASP.NET Wijmo C1Calendar. The first thing that you will notice is the lack of need for an AJAX ScriptManager. With the Wijmo C1Calendar, you can just drag and drop the C1Calendar onto the page and begin customizing. Next, when you open the task menu, you should notice that there are less options available at first glance. Let's go ahead and change the themes up a bit. Looking at the theme drop down, right away you will notice that they are completely different from the AJAX C1Calendar theming options. These themes utilize the power of JQuery to create a very modern look and feel for your application. The 6 themes available are not the only theming options that are available to you either. You can use ThemeRoller to apply different themes to not only the Wijmo C1Calendar, but all Wijmo controls in your application. For this migration, I selected the "rocket" theme. Moving forward, you will also notice that the "culture" drop down is no longer available in the Wijmo C1Calendar task menu. You will need to specify the culture in the aspx markup page. If you look at the below screenshot, you will notice the entry in this page for the culture. By default, the control is set to en-US just like its predecessor. We will change it to es-AR as in the AJAX sample. Here you can see the difference between the default en-US culture and the es-AR culture in the Wijmo C1Calendar.

Conclusion

As you can see, there are many similarities between the AJAX C1Calendar control and the Wijmo C1Calendar control. With the new line of Wijmo controls, Component One has brought support for the "new" internet to our web stack. Now that you have seen the C1Calendar control migrated, hopefully you can migrate your apps to the new Wijmo web stack.