locked
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 RRS feed

  • 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 

    Saturday, June 8, 2019 8:32 AM

All replies

  • 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,

    Saturday, June 8, 2019 6:38 PM
  • User-1355965324 posted

    Ibrahim

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

    Monday, June 10, 2019 1:33 PM
  • User-1355965324 posted

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

    Monday, June 10, 2019 2:26 PM
  • 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

    Tuesday, June 11, 2019 6:56 AM