Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/esausilva/fullcalendar-aspnet-core
Implementation of FullCalendar in ASP.NET Core
https://github.com/esausilva/fullcalendar-aspnet-core
aspnet-core event-calendar fullcalendar netcore sql-server
Last synced: about 2 months ago
JSON representation
Implementation of FullCalendar in ASP.NET Core
- Host: GitHub
- URL: https://github.com/esausilva/fullcalendar-aspnet-core
- Owner: esausilva
- Created: 2018-12-11T14:14:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:39:53.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T01:22:42.098Z (9 months ago)
- Topics: aspnet-core, event-calendar, fullcalendar, netcore, sql-server
- Language: JavaScript
- Homepage:
- Size: 2.14 MB
- Stars: 33
- Watchers: 8
- Forks: 28
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FullCalendar .NET Core with Visual Studio
> Implementation of [FullCalendar](https://fullcalendar.io/) 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.
## Setting Up
### Frontend
You will need to have [Node](https://nodejs.org) and npm installed as I use [Webpack](https://webpack.js.org) 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](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner) 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
### Backend
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.
## Things to Know
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.
## Implemented Features
- Update existing events
- Create single day events
- Create all day events
- Delete events
## Upcoming Features
- Drag & Drop events
- Rezise events
_In no particular order_
## Giving Back
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!
[](https://www.buymeacoffee.com/esausilva)
## Preview
-Esau