customd / jquery-calendar Goto Github PK

A full day, week, and resource calendar for use with jQuery.

License: MIT License

JavaScript 92.95% CSS 7.05%

jquery-calendar's Introduction

jQuery Calendar Plugin

By Sam Sehnert, Custom D 2017

This is a jQuery plugin which allows developers to implement an extremely flexible calendar interface with minimal up front development. The calendar plugin can render a Day, Week, Month and Resource calendar view.

Demos

The Demos for this plugin live under the examples/ directory. Open them directly in your web browser, or view the following online example:

Documentation

Basic calendar instance

The calendar method can be used to create a calendar widget which will allow users to graphically see and optionally edit events. The calendar leaves data implementation up to the developer. Developers can feed event data to the calendar using a standard object notation.

$('#myCalendar').cal();

The target element must be a relative or absolute positioned block level element of your choice (a <div /> would be a typical choice).

You simply specify a relative or absolutely positioned parent element, and the plugin will generate the required HTML within that element.

<div id="myCalendar"></div>

Extended Date/Time powers

The calendar plugin includes its own date and time formatting methods (using PHP style masking).

$.cal.format( new Date(), 'Y-m-d H:i:s' );

You can also perform complicated date/time arithmetic using the built in date object extender (see the full plugin documentation for more details).

var myDate = $.cal.date( '2012-01-01 08:00:00' );
myDate.addHours(1.5).format('D, jS F Y, G:i a');

// Returns 'Sun, 1st January 2012, 9:30 am'

Full plugin documentation

The Documentation for this plugin lives under the docs/ directory. Open it directly in your web browser, or see the online documentation.

License

jquery-calendar's People

Contributors

Stargazers

Watchers

jquery-calendar's Issues

calender can not be resized or refreshed when resize browser window

the calendar block is resized according to the browser window size, but the day column still the same as before.

How to display google like holidays in Events calendar

Hi,
i want to display holidays in events calendar along with events.
i have tried with dummy functions like event2:,add2:,postion2: onload it is diplaying fine
but on navigation holidays are not displaying according to month..
please help me to use your pluging

JS 'date is undefined' exception

JS 'date is undefined' exception happens when you change the date on the calendar (i.e. click 'Prev' or 'Next').

I think it's just legacy code that is causing the exception, so I removed it.

HTML 'ID' attribute for the Events in calendar .

Hi Sam,

I am looking for assigning 'id' attribute to each event div generated by the calendar api. This will help in automation testing as the automation tool we use can easily identify any element in the HTML dom using standard attributes like 'id' or 'name' etc. I understand that uid property that I pass with every event definition is listed as attribute named 'data-id' for the generated

but that doesn't helps me much as it is not a standard HTML attribute.
My requirement is(Last one is optional):

Each event
should be uniquely identifiable by 'id' attribute.
I should be able to pass the id value while defining the event(just like uid property).
If no value is specified for id during definition of event then api should auto-generate and assign sequential numbers as id for each event
.
Please help me with this.

Thanks
-Krishna K P

Updating the calendar

Hello

Firstly, I would like to thank the creator for making such a cool calendar component. :)

Secondly. the question:
I am showing a calendar in a "week" style. I am only showing one day at all times. I have a filter that enables users to move between days as they please. Now the problem is: Let's say that I open a calendar for today. With GET I get all the events that I would like to show for today and set them to events setting of the calendar. Then, I move to tomorrow with the aforementioned filter and again GET all the events for tomorrow. Now I would like to update or refresh the existing calendar with new events in the events setting of the calendar. How am I able to do that? I can't seem to figure it out, help would be greatly appreciated. Currently the events setting data is always the same (keeps the first value that was GETed and used to initialize the calendar), no matter which day I choose with the filter.

Regards

Question: Date and Time of New Event on "click"

I've seen this:
$('#calendar').on('click','.ui-cal-time',function(e){ console.log( $(this).attr('time') ) });

And it does give the time on a click event.

However, in the Resource Calendar, can I get the date, time and the Resource Id/name from a "click" event?

Online Documentation page not found

Clicking on the online documentation links leads to a 'page not found' on the Digital Fusion website.

Week view and resources

There is problem with resources after changing startsdate. Every resource column has different date (should be same)

Error occurs when we change startdate of calendar and also calendar:

has more than 1 day to display
has set resources

Add the ability to show an event's end time in the event header.

Hello there guys,

I would like the ability to show the start and end time of an event in the header of the event in the calendar. Thanks!

Resource Drag select

How do i drag and select time range in resource for an new event popup

add 'clear' method to remove all appointments

Added a clear() method, which removes all appointments from a calendar.

Display the calendar on the popup modal window

Hi,

Can anyone please help me to display the calendar on a popup modal window ...

I tried it but the grid is displaying blank.. without any events nor the header i,e; vertical and horizontal values of the calender.....

Please help me to display this in a popup window and one more thing is may i know what should i do to display the calendar in chrome browser.

Thanks in Advance.
Krishna

Advanced event title formatting

I would like to show the start and end time for each event in the title area. How would I go about doing this? What format string could make this work? Thanks for the great plugin!

how to change month calendar according on next and previous button click

when i click on next or previous calendar showing the same month calendar which is loaded on on page load

how to change calendar view according selected month on next/previous month click.

Sorting resources

Hi Sam

Is there a way to order the resources by the Value and not the id?

Feed data

what means "Developers can feed event data to the calendar using a standard object notation." You use color, title, notes, but can I use others? Could you explan better if I want to use other information inside the events?
Thank you

Embed HTML into event title / content

Is there a way to embed HTML into an event title / content?

When I try to, for example, put a link in the title, it just shows the html code as text, instead of adding a hyperlink.

Changing event resource

Is there a way to change event resource by dragging it on to different resource column? Currently, moving event ignore all others resources and allows only to place event on the same resource ID.

Best regards

resource calendar demo not working properly.

Display

I just would like to know if there is a way to show the notes when the mouse hovers over an appointment (or even on the click event)? In my calendar I have allot of 15 min appointments and the notes are to big to display in 15 mins.

Any help please.

Resource Header Date Format (simple question)

how do I include the Month in the header of the Resource Calendar view, please?

Pete

Calender does draw the event at Stop Time on Last day of a range > 1

Calendar does draw the event at Stop Time on Last day of a range > 1

Any work around ?

Last Resource in Resource View undefined

Hi
I've added the code snippet you gave me to the resource.html from the examples to get the date, time and the resource on the calendar click event.

$('#calendar').on('click', '.ui-cal-time', function (e) {
    var dt = $(this).closest('.ui-cal-resource').attr('date');

    var st = $(this).attr('time');
    var res = $(this).closest('.ui-cal-resource').attr('resource');
    alert(res);
    }

It works great for Studio 1 to Studio 3 but you get "undefined" for Ground Floor.

Any ideas?

Pete

Day time click event

Is there a way to get an event when clicking on a date and time where the event returns the date and time clicked on?

Sometimes events are hidden behind other events

Sometimes events are hidden behind other events, even when they shouldn't be.

We would have events booked like so:

1:42pm - 1:44pm
1:44pm - 1:50pm
1:48pm - 1:50pm

I would expect event 3 to be above event 2. However, it is underneath it.

Our properties are set like so:

return $('#calendar_0').cal({
        startdate       : startdate, // Week beginning sunday.
        daystodisplay   : daystodisplay,
        monthstodisplay : monthstodisplay,

        allowresize     : false,
        allowmove       : false,
        allowselect     : false,
        allowremove     : false,
        allownotesedit  : false,

        allowhtml       : true,

        // Start and end times for the days
        daytimestart    : '07:00:00',
        daytimeend      : '20:00:00',

        dragincrement   : '2 mins',
        gridincrement   : '2 mins',
        creationsize    : '2 mins',

        minwidth        : 100,
        minheight       : 35,
        overlapoffset   : 30

        masktimelabel : {
            '00' : 'g:i <\\sp\\a\\n>A<\/\\sp\\a\\n>',
            '10' : '<\\sp\\a\\n>g:10A<\/\\sp\\a\\n>',
            '20' : '<\\sp\\a\\n>g:20A<\/\\sp\\a\\n>',
            '30' : '<\\sp\\a\\n>g:30A<\/\\sp\\a\\n>',
            '40' : '<\\sp\\a\\n>g:40A<\/\\sp\\a\\n>',
            '50' : '<\\sp\\a\\n>g:50A<\/\\sp\\a\\n>',
            'noon' : '\\N\\O\\O\\N'
        },

        //maskdatelabel : 'D',

        eventselect : function( uid ){
            //console.log( 'Selected event: '+uid );

        },

        eventmove : function( uid ){
            //console.log( 'Moved event: '+uid, arguments );
        },

        eventremove : function( uid ){
            //console.log( 'Removed event: '+uid );
        },

        eventnotesedit : function( uid ){
            //console.log( 'Edited Notes for event: '+uid );
        },

        events : []
    });

Same event in different Resources

How to display same event in different resources.I cant display same event in different resources.

How do I add / remove an event programmatically?

So in my code, something like:

// Add event
var event = [.......];
$('#calendar_div').calendar.add( event );

// Remove event by uid
var event_id = 5;
$('#calendar_div').calendar.remove( event_id );

// Get a list of events in the calendar
var events = array();
events = $('#calendar_div').calendar.getEvents();
$('#calendar_div').calendar.remove( events[0].uid );

Month View Bug

hi,
In the month view, when month is changed by next or previous, day numbers doesn't update according to week days.

Another bug, when clicked previous or next buttons, current month is accepted as the first day of month in calendar, not the correct month we are looking at. As an example, if the calendar shows 28 july as first day in calendar (but you are looking at august), calendar takes july as current month.

Month view event positioning

If you have multiple events on the same date, the entries overlap when displayed in month view. Is this a bug, or am I misconfiguring something?

This behaviour seen in jquery.calendar.js v1.0.3.

events : [
{   uid : 1,    color : '#CC99FF',  begins : '2013-09-27 23:00:00',     ends : '2013-10-12 23:00:00',   title : 'Gerrit Kuilder',   notes : 'Gerrit Kuilder\n\nIntegrations - AMS'},
{   uid : 2,    color : '#FF0000',  begins : '2013-09-27 23:00:00',     ends : '2013-10-12 23:00:00',   title : 'Gerrit Kuilder',   notes : 'Gerrit Kuilder\n\nLieu Day - AMS'},
{   uid : 3,    color : '#FF0000',  begins : '2013-09-30 00:00:00',     ends : '2013-10-04 00:00:00',   title : 'Gareth  Robertson',    notes : 'Gareth  Robertson\n\nLieu Day - LON'},
{   uid : 4,    color : '#6699FF',  begins : '2013-09-30 00:00:00',     ends : '2013-10-04 00:00:00',   title : 'Gareth  Robertson',    notes : 'Gareth  Robertson\n\nPerformance - LON'},
{   uid : 5,    color : '#00FF99',  begins : '2013-10-02 23:00:00',     ends : '2013-10-02 23:00:00',   title : 'Ilias Bilikas',    notes : 'Ilias Bilikas\n\nApp Admin - AMS'},
{   uid : 6,    color : '#FF0000',  begins : '2013-10-02 23:00:00',     ends : '2013-10-02 23:00:00',   title : 'Ilias Bilikas',    notes : 'Ilias Bilikas\n\nLieu Day - AMS'},
{   uid : 7,    color : '#CC99FF',  begins : '2013-10-03 08:00:00',     ends : '2013-10-03 08:00:00',   title : 'Sam Polk',     notes : 'Sam Polk\n\nIntegrations'},
{   uid : 8,    color : '#CC99FF',  begins : '2013-10-03 08:00:00',     ends : '2013-10-03 08:00:00',   title : 'Sam Polk',     notes : 'Sam Polk\n\nIntegrations - SAN'},
{   uid : 9,    color : '#00FF99',  begins : '2013-10-03 23:00:00',     ends : '2013-10-03 23:00:00',   title : 'Antony  Alldis',   notes : 'Antony  Alldis\n\nApp Admin - LON'},
{   uid : 10,   color : '#FFCC33',  begins : '2013-10-03 23:00:00',     ends : '2013-10-03 23:00:00',   title : 'Antony  Alldis',   notes : 'Antony  Alldis\n\nAutomation - LON'},
{   uid : 11,   color : '#FF0000',  begins : '2013-10-03 23:00:00',     ends : '2013-10-03 23:00:00',   title : 'Antony  Alldis',   notes : 'Antony  Alldis\n\nLieu Day - LON'},
{   uid : 12,   color : 'red',  begins : '2013-10-03 23:00:00',     ends : '2013-10-03 23:00:00',   title : 'Antony  Alldis',   notes : 'Antony  Alldis\n\nTeam Leads - LON'}
]