Click here to Skip to main content
15,891,136 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
  I need to change left column of agenda day,Instead of Timing there should be My Employee Name List,
and According to Employee Need to Show events in each rows .


What I have tried:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>


<script>
        $(document).ready(function () {
            debugger;
            var events = [];
            var empNmae = [];
            $.ajax({
                type: "GET",
                url: "/Calendar/GetEvents",
                success: function (data) {
                    debugger;
                    $.each(data, function (i, v)
                    {
                        events.push({
                            Id: v.Id,
                            title: v.ShiftName,
                            //description: v.RosterName,
                            start: moment(v.CreatedDate).format('MM/DD/YYYY h:mm a'),
                            end: moment(v.CreatedDate).format('MM/DD/YYYY h:mm a')
                        });
                    })
                    $.each(data, function (i, v) {
                        debugger;
                        events.push({
                            Id: v.Id,
                            title: v.EmployeeName,                          
                            start: moment(v.CreatedDate).format('MM/DD/YYYY h:mm a'),
                            end: moment(v.CreatedDate).format('MM/DD/YYYY h:mm a')
                        });                      
                    })                  
                    GenerateCalender(events);
                },
                error: function (error) {
                    alert('failed');
                }
            })
            function GenerateCalender(events)
            {               
                debugger;
                 //$('#calender').fullCalendar('destroy');
                $('#calendar').fullCalendar({
                    defaultView: 'agendaWeek',
                    columnHeaderFormat: 'ddd D MMM',
                    header:
                    {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'agendaWeek,agendaDay'
                    },
                    buttonText: {
                        today: 'today',
                       // month: 'month',
                        week: 'week',
                        day: 'day'
                    },                               
                     timeFormat: 'HH:mm',
                    eventLimit: true,
                    eventColor: events.ThemeColour,                   
                   events: events                                 
                })
            }
        })
    </script>
Posted
Comments
Richard Deeming 17-Mar-20 6:25am    
That requires the "premium" version of FullCalendar, which you have to pay for:
Timeline View - Docs | FullCalendar[^]
Member 14774401 17-Mar-20 8:12am    
is there any alternate options to bind NameList instead of all-day column..?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900