How to create a partial view for the calendar view to show employee's name not working in a particular month as a calendar view

Question

User-1355965324 posted

I have the following table

EmpId	Name	LogDate	Hrs	Type
1	John	01-06-2019	7,30	DayOff
1	John	02-06-2019	7.30	DayOff
2	Alan	02-06-2019	7.30	DayOff
3	Thomas	02-06-2019	7.30	DayOff
4	Tony	03-06-2019	7.30	Holiday

From the above list I am trying to create a bootstrap calendar to view how many emplyees are not coming for the work  in each day of that month selected from the drop down. The year and month would be selected from the drop down.  I am looking for the output is as  given in the link. I have given the sharable link my google drive. The employee not coming  have to be shown in different color.

https://drive.google.com/open?id=1qVLaaF-7XqVGHT40TeCD-WItCWsWjBrs

Is there any free bootstrap js calendar  is available or please give me the help how to create the calendar view as  a partial view. Please looking for the help

With Many Thanks

Pol 

Answer 1

User-1212785763 posted

hi pol,
consider having a look at https://fullcalendar.io.

here is a quick js code that can get you up and started

<script type="text/javascript">
        var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
            plugins: ['dayGrid'],
            timeZone: 'UTC',
            defaultView: 'dayGridMonth'
        });
        calendar.render();

        var getParams = {
            startDate: calendar.state.dateProfile.activeRange.start.toISOString(),
            endDate: calendar.state.dateProfile.activeRange.end.toISOString()
        }
        $.get('@Url.Action("GetEmployeesDayOff", "Home")',
            getParams,
            res => {
                $.each(res,
                    (index, obj) => {
                        calendar.addEvent(obj);
                    });
            });
    </script>

here is also a snapshot of the GetEmployeesDayOff action

 [HttpGet]
        public JsonResult GetEmployeesDayOff(DateTime startDate, DateTime endDate)
        {
            try
            {
                // this is just a fake source
                var employees = GetEmployees(startDate, endDate);

                return Json(employees.Select(a => new
                {
                    id = a.EmpId,
                    title = $"{a.Name} - Day Off - {a.Hours} Hours",
                    start = a.LogDate.ToString("yyyy-MM-dd"),
                    allDay = true
                }), JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(new { statusCode = HttpStatusCode.InternalServerError, msg = ex.Message }, JsonRequestBehavior.AllowGet);
            }
        }

public List<Employee> GetEmployees(DateTime startDate, DateTime endDate)
        {
            return new List<Employee>
            {
                new Employee
                {
                    EmpId = 1,
                    Hours = (decimal) 7.5,
                    LogDate = new DateTime(2019, 6, 1),
                    Name = "John",
                    Type = "DayOff"
                },
                new Employee
                {
                    EmpId = 1,
                    Hours = (decimal) 7.5,
                    LogDate = new DateTime(2019, 6, 2),
                    Name = "John",
                    Type = "DayOff"
                },
                new Employee
                {
                    EmpId = 2,
                    Hours = (decimal) 7.5,
                    LogDate = new DateTime(2019, 6, 2),
                    Name = "Alan",
                    Type = "DayOff"
                },
                new Employee
                {
                    EmpId = 3,
                    Hours = (decimal) 7.5,
                    LogDate = new DateTime(2019, 6, 2),
                    Name = "Thomas",
                    Type = "DayOff"
                },
                new Employee
                {
                    EmpId = 4,
                    Hours = (decimal) 7.5,
                    LogDate = new DateTime(2019, 6, 3),
                    Name = "Tony",
                    Type = "DayOff"
                }
            };
        }

hope this can help you!
regards,

Answer 2

User-1355965324 posted

Ibrahim

It is the one I am looking for. I dont think it is free plugging. Please can you advise me

Answer 3

User-1355965324 posted

How can I use the css file js file to use this plugging

Answer 4

User839733648 posted

Hi polachan,

As ibrahim.khalil has suggested, FullCalendar is a good choice. 

You could go to https://fullcalendar.io/license to check the license that there are two different products.

I think the free one is enough for your requirement.

I suggest that you could read the documentation about the basic usage and events description to learn more about it.

Here is a simple demo I've tested. You should also pay attention to the referred links.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.css" />
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
    <script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function () {
            var JSON = [
                {
                    "id": "1", // Optional
                    "title": "Demo event", // Required
                    "start": "2019-06-13 10:20:00", // Required
                    "end": "2019-06-13 11:00:00", // Optional
                    "allDay": false, // Optional
                    "url": "http://google.com", // Optional, will not open because of browser-iframe security issues
                    "className": "test-class", // Optional
                    "editable": true, // Optional
                    "color": "yellow", // Optional
                    "borderColor": "red", // Optional
                    "backgroundColor": "yellow", // Optional
                    "textColor": "green" // Optional
                },
                {
                    "id": "2", // Optional
                    "title": "Demo event 2", // Required
                    "start": "2019-06-14 10:20:00", // Required
                    "end": "2019-06-14 11:00:00", // Optional
                    "allDay": false, // Optional
                    "url": "http://google.com", // Optional, will not open because of browser-iframe security issues
                    "className": "test-class", // Optional
                    "editable": true, // Optional
                    "color": "yellow", // Optional
                    "borderColor": "red", // Optional
                    "backgroundColor": "yellow", // Optional
                    "textColor": "green" // Optional
                }
            ];

            $("#demo-calendar").fullCalendar({
                header: {
                    left: "prev,next today",
                    center: "title",
                    right: "month,agendaWeek,agendaDay"
                },
                events: JSON
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="demo-calendar">Calendar</div>
    </form>
</body>
</html>

result:

References:

https://fullcalendar.io/docs/v1/usage

https://fullcalendar.io/docs/events-json-feed 

Best Regards,

Jenifer