Solved

create a custom view using FullCalendar

Posted on 2015-02-08
7
3,261 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Parallax 1 43
Angular - disable input field on page load 4 25
Getting selected value of a dropdown with jquery 7 40
parse url to form? 7 14
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

831 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