Implementation of FullCalendar in ASP.NET Core
The project includes the implementation of FullCalendar in JavaScript ES6+ and comes wired with the necessary database access layer (including SQL statements) to interact with SQL Server.
You will need to have Node and npm installed as I use Webpack to compile my Sass files and modern ES6+ JavaScript files to JavaScript browsers can understand.
Clone this repository then in Command Prompt navigate to the project's directory and install NPM packages
cd [project's path]\fullcalendar-core\fullcalendar-core
npm i
You will also need NPM Task Runner as I have set up to run Webpack in watch mode when the project opens. Webpack will also run before each build building the JavaScript for production. You can see the bindings if you open Task Runner within Visual Studio
In SQL Server create a database and name it fullcalendar, then create a table and name it Events with the following format
| Column Name | Data Type |
|---|---|
| event_id | PK, int, identity(1,1), not null |
| title | VarChar(300), not null |
| description | VarChar(max), not null |
| event_start | DateTime, not null |
| event_end | DateTime, null |
| all_day | Bit, not null |
Once you have that, open appsettings.json and change the connection string to reflect your database connection.
The source Sass and JavaScript files are found under .\Styles and .\Scripts directories. Webpack will compile them every time upon save and place the output files under .\wwwroot\css and .\wwwroot\js, so DO NOT modify these output files.
For production, Webpack will minify and optimize the output files appending *.min.* to the file name. The CSS will also get auto-prefixed.
- Update existing events
- Create single day events
- Create all day events
- Delete events
- Drag & Drop events
- Rezise events
In no particular order
If you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!
-Esau