Jquery fullcalendar copy last week events to next week sample code

I love jquery fullcalendar plugin. But sometime we need to do customizations as per our requirements. So I had a challenge to add a feature to copy last week events to next week on button click.

I started work on this and created some logic to copy last week data and move to next week. It wasn’t pretty straight forward but it took some time and finally I able to complete this feature.

Please find below the my jquery full calendar with copy last week availability or events to next week.

copy last week events

copy last week events

Please find below the sample code, you need to focus on customButtons, hearer (btnCopyEvents) and viewRender. Rest code is for my other stuff, but it’s good smaple to create/update events as well.

Client Side Code Sample

$('#calendar').fullCalendar({
        customButtons: {
            btnCopyEvents: {
                text: ''
            }
        },
        header: {
            left: 'prev,next today,btnCopyEvents',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        scrollTime: "6:00:00", //6am
        //slotLabelFormat:"HH:mm",
        selectable: true,
        selectHelper: true,
        select: function (start, end) {
            var title = '';//empty means he is avialable
            start = moment(start).format("DD-MM-YYYY HH:mm");
            end = moment(end).format("DD-MM-YYYY HH:mm");
            addEditEvents("0", title, start, end);
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        eventResize: function (event) {
            //documentation http://fullcalendar.io/docs/event_ui/eventResize/
            var start = moment(event.start).format("DD-MM-YYYY HH:mm");
            var end = moment(event.end).format("DD-MM-YYYY HH:mm");
            addEditEvents(event.id, event.title, start, end);
        },
        eventDrop: function (event) {
            //documentation http://fullcalendar.io/docs/event_ui/eventDrop/
            var start = moment(event.start).format("DD-MM-YYYY HH:mm");
            var end = moment(event.end).format("DD-MM-YYYY HH:mm");
            addEditEvents(event.id, event.title, start, end);
        },
        events: {
            url: '/Admin/Mechanic/Events',
            data: function () {
                return {
                    mechanicId: mechanicId
                };
            },
            type: "POST"
        },
        eventRender: function (calev, elt) {
            if (calev.JobStatus === "Closed") {
                elt.addClass("past");
                elt.children().addClass("past");
            }
        },
        viewRender: function (view, element) {
            var datePicker = document.getElementById('btnCopySpan');
            if (datePicker == null) {
                $('#calendar .fc-toolbar .fc-left').css('margin-left', '20px');
                $('.fc-btnCopyEvents-button').append('copy last week availability');
                $('.fc-btnCopyEvents-button').on('click', function () {
                    var b = $('#calendar').fullCalendar('getDate');
                    $.ajax({
                        url: '/Admin/Mechanic/CopyEvents',
                        data: { mechanicId: mechanicId, currentDate: b.format("DD-MM-YYYY HH:mm") },
                        type: 'post',
                        dataType: 'json',
                        success: function (response) {
                            if (response.success) {
                                // reload events if you want
                                $("#calendar").fullCalendar('refetchEvents');
                                toastr.success("Events copied successfully!");
                            }
                            else {
                                toastr.error("Error - " + response.error);
                            }
                        }
                    });
                });
            }
        },
        eventMouseout: function () {
            $(this).css('z-index', 8);
            $('.tooltipevent').remove();
        },
        eventClick: function (calEvent) {
            swal({
                title: "Are you sure?",
                text: "This will delete the event and no more visible on calendar.",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!"
            },       
        }
    });

Server Side Code Sample

  /// 
        /// copy events of mechanic
        /// 
        /// 
        /// 
        /// 
        public ActionResult CopyEvents(string mechanicId, string currentDate)
        {
            try
            {
                int mechId = Convert.ToInt32(mechanicId);
                DateTime todayDate = DateTime.ParseExact(currentDate, "dd-MM-yyyy HH:mm", CultureInfo.InvariantCulture);
                var lastWeekDate = todayDate.AddDays(-7);//week start date

                var db = new Entities();
                var entity = db.MechanicEvents.Where(m => m.MechanicId == mechId && m.StartDate >= lastWeekDate && m.StartDate < todayDate);
                if (entity != null)
                {
                    foreach (var item in entity.ToList())
                    {
                        var model = new MechanicEvent()
                        {
                            MechanicId = mechId,
                            Title = string.Empty,
                            StartDate = item.StartDate != null ? Convert.ToDateTime(item.StartDate).AddDays(7) : item.StartDate,
                            EndDate = item.EndDate != null ? Convert.ToDateTime(item.EndDate).AddDays(7) : item.EndDate,
                            CreatedBy = User.Identity.Name,
                            DateCreated = DateTime.Now,
                            IsDeleted = false
                        };
                        db.MechanicEvents.Add(model);
                        db.SaveChanges();
                    }
                }
                return Json(new { success = true }, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                HandleErrorCondition(e.Message);
                return Json(new { success = false, error = e.Message }, JsonRequestBehavior.AllowGet);
            }

        }

Hope this will help to do your stuff, please don't forgot to comment and share if it helped you.

cheers....

Posted by | View Post | View Group