Event/Scheduler calendar in asp.net MVC application

hello friends welcome to the dotnet awesome YouTube channel today I will show you how to implement event or scheduler calendar in asp.net MVC application we know that modern web application impose ever higher demands on the user interface right so if we have to develop an event or scheduler application where user can view and manage their serial terms in a calendar then how we should develop the application with a good user interface keeping in mind here I will show you how we can create an event or scheduler application with a modern user interface using jQuery full calendar plugin full calendar is a JavaScript event calendar for displaying events but it's not a complete solution for event content management so what we will do here we will implement this event or scheduler application in two parts where in the first part I will show you how to display events in a calendar and then in the next part we will implement crude operation for manage event or schedule tasks for making this tutorial simple and understandable let's implement first part displaying events in full calendar of the tutorial implementing event or scheduler calendars in asp.net MVC application so first of all we need to create a new project so I will open visual studio I am using resistor 2015 so you can also open your visual studio and then for create new project I will go to file new and then I will click on this project menu from here I will click is periodic web application under web and then here we need to provide our application name so inter your application area so in my case is NBC event calendar okay and then from this location go down you can select your location or you can also browse your location where you want to save your project and then click on OK button it will brings up a new dialog window for select HP dotnet with application 10 click so from here I will select this empty template and then here you can see I have checked MBC from add folders and called code reference walk okay so as we are creating NBC application and then click on OK button so you can see how all the required references is already added here after creating the project we have to create a database for our application as this is a tutorial project I will add a database in our application here in this a PP data folder you can add a new database in your store server or you can use any existing database also so what I will do for add a new database here in our application I'll go to solution Explorer and in the solution Explorer I click on this it will be data folder and then go to add and then click on this new icon it will brings about another dialog window from where we can select our whatever start so we will select SQL Server data based on the data and then sure we need to enter me so here in my case I will enter my data will start in D okay and then click on add bakka you can see here one MDF file is added here inside this ATP data folder double click in this file so conditioner server Explorer and then here we will create one new table so I will explain this table node and right click here in the tables node for add a new table and click on add new table we are creating this table for save calendar events okay so let me quickly create this table so sure I'll go by event this is a table name and then I will add some filter for store event information event ID I will make this identity okay and then I would like object there's no description for a vegan description information and I will make this small level if you want to store some gauge description we can otherwise you can leave it empty okay and then start or say start time of the event and it's also the tenth I I make this nullable or n times of the event and then I will add one more column view is the theme color this is was - event color so user can easily identify the priority event or schedule tux on the calendar and finally I will add one more column is holding its the big type store - and false value so here in this field Google store - if the event is for full day or otherwise it will be false if it is not for the folding okay so this is our table and now click on the submit button copy at this table finish our table is created now I will add some information here or show this events on the calendar I have written here some information copy/paste so you can see here I have added two events here in this event table one for birthday information second for meeting information okay done now I will generate entity data model from the database table in our application for work with the database data okay so here just go to the solution Explorer and right click on the project name and go to add and click here on the new item and from the data I will select a do dotnet entity data model and here we need to provide one name of our model so here in my case it is my model and then click on Add button from here I will select yes designer from database because we want to create this no database approach so I will select this one then click Next button from here we can select our database and also if you want to use existing one so here you can click here for generate new connection okay and then see this one save connection string in web.config in this name the connection string will be saved in web config file and this name will be all data context name okay so go to the next button select contagion were six point X and click again next from here we will select our table okay and then click on finish button our data model is created here in our application okay I am going to close this one now here in our application we will add an MVC controller which is the home controller for adding controller go to solution Explorer and then here right click on the controllers folder and then go to add and then click here in the controller ok from here I was like nbc5 controller NP template and then I will click on this Add button here I will write home when shoulder ok and click on Add button or home controller is created I have renamed it as a home controller because we know that by default in the route config the default controller is the home ok so when we will run our application this controller index action will be executed first ok so this is our default MVC action so we have successfully created our home controller you can see here in the image 1 in v3 action which is index action is already added we will use this action for showing events or scheduled tasks in the calendar so what I will do now I will you create one view for this index action so right click inside this intersection for add a new view and then click on this menu add view from here this is my view name you can rename it if you want and then from this template I will select empty without model ok and this checkbox is checked because I want to use layout page and then click on Add button for adder this index view ok we have successfully added the view for the index action of the home controller before adding any HTML content here we will edit a little our layout page okay so I will go to this video and here you can see in the Stewart folders there is one another view which is our layout view okay so open this one I will change a little what I will do here we will add our render section just after added jQuery offense here after this two line okay so let me add this one in the section then we have to provide one name clip something alright is record is false okay this render section allow us to create a placeholder so we can render content here in this placeholder from any child view we have done this because we have to add some jQuery code in the index view and that jQuery code should be after loading jQuery library so that's the reason we have added this one I will go back to the index div again and what we will do here first of all I will add our deep for render the calendar where we will show events from the database okay so so here I will add one day with ID a lender okay and then we have to add record CSS and J's libraries for full calendar I have given the download link of the of this required J's or CSS libraries in this video description box so you can download from this link okay let's add CSS first this is the link somewhere we can download required CSS and J's libraries for full calendar this is the HTTP colon full calendar dot io / download okay you can see here all the CDN references are added so this to CSS so we need to add first I will copy this one and here I will add sling HJ sequence to this one men should be stylish it can way we add this full calendar doctor got cases also so I was hoping this one to start it done now I will add Richard J's library here we will use the render section we have created in our layout here so use the render section we have to write at the rate section and then we have to provide the name so let me see what mean I have given a fifth so here keeps and then inside this bracket we will declare record the occupy libraries and also we can write some our record JavaScript code here so this section Java code will be rained out here after this too here in this section okay so what I will do here so here I will add 3x SP and then from here I will selectively this is fully calendar the escape library so I will add a show and one more thing we need to add here which is moment dot J's this is the code for this full calendar library ok so what I will do I'll copy this one this is a Syrian link for moment based library okay all right so please mrs. P okay so we have already done added all the required pieces and here's libraries now here we will write some jQuery code for generate and rain doe events in the calendar okay so what we will do here we will write a function for generating the calendar for showing event or C Delta let's do it with your script section and then document ready and inside this function I will guide code here I will create one function for generate calendar with events later okay so people generating the calendar we should call the destroy method if it is already created so it will clear the instance so what I will do you for destroy this one is our calendar will store for calendar and Here I am to provide committed name which is destroyed okay so if already we have any instance of the full calendar with this in this ID so it will kill you first okay and then we will create the calendar here in this D okay so this will name dot full calendar and here we have to fast some options potato first of all content height it's 400 so the calendar control heights should be 400 pixels okay and then default it we knew this because I want to focus on the current date and then time format this is for showing time form it is all the options you can get here in the documentation section view of this full calendar website okay now in the header click provide the option for us to how we want to render the control calendar control like next and previous button to day button and different type of views so we can provide you what we want in the left side is we're going to old first we add previous button so here phase and then comma then it will point next button so this is the name and then I want to show today after a simple space so this is done of the left side contain in the center of the calendar I want to see the title titles means in the middle objects calendar control it will show the month and year okay and on the right side I want six patterns month view button then basic week button then basic day button and then I want to add agenda button okay so it is our header section I want to add two more thing pure event we meet it's true this is for showing class button when multiple events are there in a single container and it's not fit in the container so it will show one class sign so when we click on the plus sign it will show all the events of that sales okay we can also define default event color with this event color option I want to add this color as default event color and one more no important thing is even what event I want to render here even should be this even what we will first as a parameter okay now we have to call the function for generating our calendar for showing event but before calling the function we should pace events from the database right and for this I will write for for adjust call here what I will do here so observe queue I will scald for its data from the devil so the skies will be gates method I will use of X data and then we have to provide URL sorry Laurel so tricky thing okay even then I will write one success method so we'll exact one object containing events from database let me be clear one variable you'll go to swim and then solar garbage minguk's and in the value i am doing follows with this data and then inside this volume our state object for this event a pencil then dot push what we need to do is to create one object to push in this event added so what i like to do is when you are title I want to show subject information here and then I have description within after stored some dead time with the moment VDOT sought after ad and as the field is malleable so what I will do here I will take before assigning value is not equal to null then only I will assign this value moment P dot and otherwise it will be non okay then follow here we will add 3 dot in color this is all because filming and finally I will do one more thing all day we dot is holding so this is done what we have done here we fetch information from database and then we create one every object and you we push data from database to this object okay we have created one of the queue and then we will call this method for generate the calendar and display their event information in the calendar after this for loop we call this method can get calendar with this event object okay now this is done and if it is small subtle so I will give one error message so we can understand if this addict for sale okay you can see here in this ejects call we have used one URL for facing event data but till now we have not eaten the action for this URL let's add it so but where I need to add this one in the home controller you can see you so I will go back to the home controller and here station research and the name should be get even and here what I will do I will fetch data from our database and return as a JSON result okay so you can this might be a link this is our conditioning what if we have to do in the state here my data this entities is our data context name you can see here this is generated when we have added entity models in our application so this is our data context name we need to create this data context object for access data form data will you using security sixty dot even dot to list turn now from your our return minimization result the Delta I will fall even okay good so this action is also done so we are ready to run the application and lick from the application for take everything is working perfectly fine or not so I'm going to run this application you can see here two events is rendered but it should be with background color green and red once again let me take this one first okay one mistake I have done go which is how to add media a faint okay let me refresh this page again now it's showing perfectly fine you can see your two impulse to event you're showing here in this calendar this is for today and this is for meeting but notice here one thing this is not showing properly sure we should have some way to display this information properly on as well as the description what we have added right so for business things we can do one thing we can add model popper so whenever we will click on this event it will open the model pop up and display the content of this event okay so let's do it quickly so for this what I will do I will add one model pop of HTML ago as we are using bootstrap so I will write model pop-up for booster dose here I will add one thing with ID my model and cache should be with chapter model and head and 250 diner sweetie please I will add one another d-model dialogue add one movie it's a smaller font and then I will add these for mobile video and then one another deal for model body and the last one with for model suitor okay what we show in the video will serve on close button button - protect closed with the business model and he'll we will show one it and we will show model peggle also my class it should be model title and we will show the event subject okay so let me add one thing with Rd event turtle and in the body we add 1 Peter with ID here I will show the event information like start time end time description click information and at the footer I will add one more button or closed or quick I will copy this one festival and trusted PPP in default and will the text should be closed it is done so this is our model dialog now for showing information here in this model dialog what I need to do I need to update this calendar full calendar here I will add one more event which is again skip this function will be called when we will click on any event your we will first see value which is the default value of this event care agent the first parameter is event is the second parameter and third is view so what I will do you first of all I will boil model let me see this one one so this IV I will show the subject of the collected event so inside my model what I will do sure I will do this fine dot text using the title so this way we can show title and the model title the solo for the description I will get one variable here fiction it one deer element so what I will do the fictional dog stand with her I will happen 1 Peter 4 shows start or end II think because our Peter dot hTML is very shifty HTML Plus using dot dot dot form it will you have to provide the format which one to be stated equal and what I will do here didi and the face you all may need bring in all TN for this is for start I will do the same if the end it is not anything under dot and not equals to null then we can add this one okay okay this is also done and finally we will add description with a fiction box so you description this one ok so this was also done so but I will show this information I will share this information here this P detail so what I will do here - my model speaker first of all I will clear it and then I will add this HTML of description ok so this is done oh sorry this from fading now this is okay and then I will call this dot modern people for openwork model dialogue window okay so let's take this our browser and see everything is working fine or not go here control e5 for a page this one space and now if I click on this you can see it's showing the start and as there's no description not showing any description start date ended but title is not showing let me take this one I have done some mistake I think ok I've done one healing mystic now it's okay now let me see I'm going to use the browser again load it now if I click here you can see now is showing the title also and start it and it and also the description and if I click close button so this is working perfectly fine now thanks for watching please don't forget to Like comment and subscribe and view the next video where we will implement crude operation for manage event or schedule tasks in the calendar I will provide the next part video link of this tutorial in this video description box or you can subscribe my channel for getting notification whenever we will upload any video thank you have a nice day

Channel: sourav mondal

Views: 156,121

Keywords: event calendar, schedule task calendar, fullcalendar in asp.net mvc, implement Event/Scheduler calendar, implement Event/Scheduler calendar in MVC, implement Event/Scheduler calendar using fullcalendar plugin

Id: wA-Iy6ThYz4

Length: 40min 53sec (2453 seconds)

Published: Tue Jun 27 2017