Solved

create a custom view using FullCalendar

Posted on 2015-02-08
7
2,711 Views
Last Modified: 2015-02-19
I am using the full calendar plugin and I'm trying to figure out how to create a custom view or if I can modify an existing view and tailor it the way I need.

Right now, I am using the agendaDay view (see screenshot). What I need to do is have the view show the times of the day horizontally at the top and in the left pane where the times currently are have a list of reps that I can query and display vertically. So, for each row (rep), it will show the scheduled visits for the day in the appropriate time slots.

screenshot
I was reading the documentation of the FullCalendar but, I haven't figured out how to implement the custom view.

Is there an example of how to do something like this using full calendar plugin?

Thanks for any help!
0
Comment
Question by:-Dman100-
  • 4
  • 3
7 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40597467
Download FullCalendar 2.2.6 as I found there were some issues with the versions between libraries.

A basic template would look as follows (the urls are relative to my personal server so you'll need to change as necessary):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Full Calendar Example</title>
        <link href="../_assets/plugins/fullcalendar-2.2.6/fullcalendar.min.css" rel="stylesheet" type="text/css"/>

        <script src="../_assets/plugins/fullcalendar-2.2.6/lib/jquery.min.js" type="text/javascript"></script>
        <script src="../_assets/plugins/fullcalendar-2.2.6/lib/moment.min.js" type="text/javascript"></script>
        <script src="../_assets/plugins/fullcalendar-2.2.6/fullcalendar.min.js" type="text/javascript"></script>

        <script src="myview.js" type="text/javascript"></script> <!-- <============= this is your custom view code -->

        <script>
            $(document).ready(function () {
                $('#calendar').fullCalendar({
                    // put your options and callbacks here
                    defaultView: 'custom', // <============= this is where you set your custom view
                    events: [
                        {
                            title: 'event1',
                            start: '2010-01-01'
                        },
                        {
                            title: 'event2',
                            start: '2010-01-05',
                            end: '2010-01-07'
                        },
                        {
                            title: 'event3',
                            start: '2010-01-09T12:30:00',
                            allDay: false // will make the time show
                        }
                    ],
                    defaultDate: '2010-01-01'
                });
            });

        </script>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>

Open in new window


this is the code of myview.js
var FC = $.fullCalendar; // a reference to FullCalendar's root namespace
var View = FC.View;      // the class that all views must inherit from
var CustomView;          // our subclass

CustomView = View.extend({ // make a subclass of View

    initialize: function () {
        // called once when the view is instantiated, when the user switches to the view.
        // initialize member variables or do other setup tasks.
    },
    render: function () {
        // responsible for displaying the skeleton of the view within the already-defined
        // this.el, a jQuery element.
    },
    setHeight: function (height, isAuto) {
        // responsible for adjusting the pixel-height of the view. if isAuto is true, the
        // view may be its natural height, and `height` becomes merely a suggestion.
    },
    renderEvents: function (events) {
        // reponsible for rendering the given Event Objects
        console.dir(events);
    }
    destroyEvents: function () {
        // responsible for undoing everything in renderEvents
    },
    renderSelection: function (range) {
        // accepts a {start,end} object made of Moments, and must render the selection
    },
    destroySelection: function () {
        // responsible for undoing everything in renderSelection
    }

});

// call this what you like, for this example it's just called 'custom'
FC.views.custom = CustomView; // register our class with the view system

Open in new window

0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40597472
once you've got this setup and running you'll see only the header as you've not defined anything yet, however you could extend the 'agenda' class to get some functionality.  The basic with nothing overriden (I've commented out all the functions), you get the same functionality as te agenda view.  It looks like this (see how we're now inheriting from FC.views.agenda):

var FC = $.fullCalendar; // a reference to FullCalendar's root namespace
var View = FC.views.agenda;      // the class that all views must inherit from
var CustomView;          // our subclass

CustomView = View.extend({ // make a subclass of View

//    initialize: function () {
//        // called once when the view is instantiated, when the user switches to the view.
//        // initialize member variables or do other setup tasks.
//    }
//    render: function () {
//        // responsible for displaying the skeleton of the view within the already-defined
//        // this.el, a jQuery element.
//    },
//    setHeight: function (height, isAuto) {
//        // responsible for adjusting the pixel-height of the view. if isAuto is true, the
//        // view may be its natural height, and `height` becomes merely a suggestion.
//    },
//    renderEvents: function (events) {
//        // reponsible for rendering the given Event Objects
//        console.dir(events);
//    }
//    destroyEvents: function () {
//        // responsible for undoing everything in renderEvents
//    },
//    renderSelection: function (range) {
//        // accepts a {start,end} object made of Moments, and must render the selection
//    },
//    destroySelection: function () {
//        // responsible for undoing everything in renderSelection
//    }

});

FC.views.custom = CustomView; // register our class with the view system

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40597497
Looking further into this, the key to what you want is in the TimeGrid and DayGrid variables that form part of the view.  You may need to look at extending the Grid class for your reps and insert the Day and Time Grids across the top
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:-Dman100-
ID: 40598519
Hi Rob,

Thanks for the example!  I'm working on implementing this now and will report back on how it is working! Thanks a million for your help!!
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40616232
Hi Dwayne!

just wondering how you got on with this?
0
 

Author Comment

by:-Dman100-
ID: 40620537
Hi Rob,

I haven't been able to get it to work the way I want yet, but one of our other developers found this JS library:

http://dhtmlx.com/docs/products/dhtmlxScheduler/

The timeline view has exactly what we are trying to do.

I apologize I didn't respond back sooner!  I have been buried this week.  I really wanted to get the original one working right because it has all the views, month, week, day and then get that custom view, but the powers that be seem to want to go with this other one.

I know your solution was right on target and we could have gotten it to work!

Thanks for taking the time to look into it and provide your expertise!!! :)

-D
0
 

Author Comment

by:-Dman100-
ID: 40620538
I'm still messing with that code and I am going to figure it out!! :)
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now