![]() ![]() The ID is an auto-increment, Title gets displayed within the Calendar control as an event, SomeImportantKey represents a referential link to some other data table, DateTimescheduled is the diary date/time, Appointment length is an integer that represents the number of minutes the appointment lasts, and finally StatusENUM is an integer that links to an ENUM value to say if the appointment is an enquiry, a booking, confirmed, etc. The SQL table is called " AppointmentDiary" and contains these fields: (The SQL source is attached to this article.) Rather than use dummy client-side data, I wanted to show how we might store and manipulate data in a working environment, so I put together an SQL database to store data and linked to it using Entity Framework. When we run the project, as expected, the plugin appears: familiar to most), and to have a default time slot of 15 minutes. The initialization settings tell the plugin what to show in the header, the default view (in this case "agenda day". Finally, to prove it's at least loading and rendering correctly, we will add some basic JS when the document is ready and loaded:.We will do our work in the default index.cshml page, so in there, place a DIV to hold the plugin:.This is in BundleConfig.cs and is located in your App_Start folder. In your MVC project, add the bootstrap files to your script bundles.For both libraries, unpack and place the CSS file in your /Content folder, and the JS scripts in the /Scripts folder.Download Twitter Bootstrap (I am using the stable version 2.3.2 until v3 is out of RC).Create a new C# MVC project and clear out the default view templates.(Note that the inline style is simply to force the width for screenshots inside the CodeProject publishing size guidelines!) You will also note that I have added the JQuery-UI JS file to my bundle - this is needed to support drag/drop. For drag/drop functionality, the plugin depends on jQueryUI to be included, and finally, in order to stop the plugin triggering before I wanted it to, I had to control the flow of loading of data carefully. ![]() I also had some issues with trying to get the events rendering exactly how I wanted - the DOH! moment came when I realised I was referencing some CSS in the wrong order/sequence. Some of the gotchas included date format (this plugin uses a Unix timestamp), and having to work with multiple plugin data sources as I wanted different kinds of data queried depending on the view of the calendar being seen (day, week, month.).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |