kthornbloom/monthly

A jQuery based responsive calendar

monthly's Issues

change language

how to change language month and date ?

Cant return to the month view

When i click on a date i can see the events, but i cant go back to the month view.

How to load a specific date on page load instead of today's date?

Hello,

First, I love this calendar. Thank you for your awesome work!

My question is:

When the page finish loading, I don't want it to automatically select today's date. I want it to read an already set date from an html element, then select that specific date in the calendar.

My js code:
$('#mycalendar').monthly({
mode: 'picker',
// The element that will have its value set to the date you picked
target: '#getDateSelected',
// Add a style to days in the past
stylePast: true,
// Disable clicking days in the past
disablePast: true
});

Is there a js variable to load a specific date on page load?

Thanks!

Sorting

I have 2 all day events on the same day. Its currently sorted by alpha of the event name, is it possible to change that sorting method, maybe by the id defined in the xml data?

close button

no close button

January 2017

January 2017 starts with the wrong day..... 1/1/2017 is not a monday!!!!

How to pass dynamic JSON data for date highlight.

I am using this calendar , it is great , just stuck at a point where i want to pass dynamic JSON through a variable not through a file URL, not be able to do this ... can you please help.

Display Multiple Months

Hello,

I am trying to utilize Monthly.js to display 3 months at a time (the current one as a large calendar and the next two as small previews). I was easily able to initiate 3 separate calendars using different IDs, however I am struggling to figure out how to make them show different months.

Is there a way to tell a calendar what month to load as? also is there a way to easily synch the next month button to trigger all three calendars that are displayed to change?

Thanks for any help,
Justin

Can't seem to get my events to load

Hi. Loved the example and it fits precisely with what I'm trying to do in my webapp. The problem I'm having is that I can't get my file to load events in.

I've got a restful-type call made that returns json data (example here:
[{"id":97,"name":"certificatename","startdate":1475614800000,"enddate":1475616600000,"starttime":1475614800000,"endtime":1475616600000,"color":"#0000FF","url":"/library/detail/922"}]

I see that my api call is working fine, and I get no errors when I try to load it up, but the following js doesn't work:

HTML:

<div style="width:100%; max-width:600px; display:inline-block;">
    <div class="monthly" id="mycalendar"></div>
</div>

JS:

$(window).load( function() {

        $('#mycalendar').monthly({
            mode: 'event',
            jsonUrl: '/api/public/eventcalendar',
            dataType: 'json'
        });

    });

When I do this, my calendar object loads up fine but there are no events populated. What did I miss?

Wiki > All Options - Default for mode is incorrect

In the Wiki > All Options page, the default for mode is actually 'event' but documented as ''

Is there any way to add event data as a resource instead of passing json or xml files?

I am looking for a solution to pass the data dynamically to the calendar view.but it always requires a file object to render the events. How do i pass the values dynamically ?

Line Spacing

I'm not sure if this is a bug report or a feature request. Treat it whichever way suits you best.

I'll describe my sample data then the problem.

Event 1: Monday June 13 2016 to Thursday June 15, 2016 8:00 AM to 12:00 PM
Event 2: Sunday June 12, 2016 to Tuesday June 14, 2016. 8:00 AM to 12:00 PM
Event 3: Monday June 13 2016 to Thursday June 15, 2016 12:00 PM to 4:00 PM

When the calendar renders, Event 2 shows in the right place. But then event 1, which starts a day early, starts on the top line and then gets pushed down for Monday. Event 3 which starts on Monday is fine, but the last day of it gets pushed up one line because there's nothing to fill it in.

In this case, what my events are showing is availability to be booked for a certain range of dates, and within those dates they have the same start and stop time.

I would think that a contiguous event would share the same line all the way across the calendar.

If I'm missing an easy solution, please let me know.

URL not working

Everything works and then when i put in the url link all items on calendar dissapear

JSON event format support

I hope that this plugin may consider support JSON format for more easy usage.

NPM support

Implement a package.json to use this plugin with npm.

Calendar does not load in IE 10

I noticed there is a script error that is preventing the application from loading onto the page in Internet Explorer 10.

SCRIPT5007: Unable to get property 'toLowerCase' of undefined or null reference
monthly.js, line 37 character 5

Do you intend to fix this error? It is happening on the demo site you have set up as well as with my own implementation of the code.

This seems to be an internet explorer only issue as the calendar is working exceptionally for me in all other browsers.

How would you put the variable description of the event?

When you click on the event, show:
Name
Description
Hours

Useful for small details of the event.

no json file found

in the repository no json file is found which can render the data to the page

open event URL on click

Is it possible to open event URL when we click on it (without the eventList step)?

How to reset calendar when clicking on a button

Hello,

Is there a way to reset the calendar to a different date when different buttons are clicked?

jquery calendar

How can i render the servlet response which is already converted in json format in jquery ui calendar??
The code is error free but doesn't render in calendar.

Week number

Is it possible to see week number on the left of each row in month view?

Problem when changing between monthes

Each time I click on the arrow to go to the next month or to a month before it doesn't clear the current content of

and keep appending

JSON support

Is it possible to add a JSON support like XML Support ?

Re-generate the event calendar

My web server will return a month of event in xml regarding to the request parameters.

Let's said the web page send a request to get the current month xml at loaded,
How can i regenerate the event calendar if i got a new xml which about the next month events?

Skipping months

My team was using an older version of this calendar inside an angular 1.5.5 application and over 50% of the time clicking the next or previous buttons would skip a month or months. After updating to the newest version this issue still occurs, but at a much lower frequency.

When this occurs all of the calendar info from the skipped month(s) and the skipped to month is combined.

After adding some basic tracking I noticed that sometimes the next/prev button is registering 2 clicks. Not sure why this is happening, but I added a conditional to the next/prev on click function and it doesn't skip any more.

Days Position

how to change position day sunday to right and monday first day position left ?

Days and dates Different in some browsers

Minor issue viewing your demo, there are differences between days and dates.
IE 11 shows Jan 1st as Sunday
Chrome shows Jan 1st as Friday
Firefox shows Jan 1st as Friday (but squeezes the height)
Safari just screws it up all together

Still, it's the best looking calendar I've tried. Congrats on the new code and hope to see it develop further.
Rob

Viewing only the events of a selected day

Hi,
Is it possible to modify the code to display only the selected days' events?
The way it is now is a bit illogical: user clicks on a day, and a whole list of events pops up, even when none of them is of the day selected..

Thanks for your help,
Adam

Upon click on "Today" button whilst event list is shown calendar resets to current month with empty event list

Steps:

1. Select any other month than current.
2. Click on any day to review list of events.
3. Click on "Today" button.

Expected:

• List of events shown for current month.

Actual:

• Empty events list shown for current month.

I were able to fix it for myself by adding && $(parent + " .monthly-event-list").hide() to the following (hides events list):

// Reset button
$(parent + " .monthly-header-title").html(
	'<a href="#" class="monthly-header-title-date" onclick="return false">' + monthNames[month - 1] + " " + year + "</a>" + (settingCurrentMonth && $(parent + " .monthly-event-list").hide() ? "" : '<a href="#" class="monthly-reset"></a>'));

License

Could you please provide license information for this library.

Events repeat when working with angularJs

Hi,
im creating event base calendar with monthly.js and angularjs
i have to page one is calendar.html and other is addEvent.html
when application load first it show calendar.html there i have button for adding event that show addEvent.html.
everything is working fine accept.

1. calendar page load it load the respective controller to show all the events
2. when we go to addEvent page and click on cancel we redirect to calendar page again controller get trigger
   3.[issue] on calendar page when we change the month and then come to today's date month the events get appended again to the same date.

file has been attached for the reference.

eventAdd.zip

im not an expert in javascript

Full year view

Is there an option to display all 12 months on one page?

Very Limited

Would love to be able to use this for multiple fields on the same page, without relying on setting two specific IDs within the html; being able to target using variables would be fantastic. This was the code I tried to make work:

$('.date').after('<div class="monthly"></div>'); $('.date').on('focus',function(){ var targetInput = $(this); var calContainer = $(this).next(); $(calContainer).monthly({ mode: 'picker', // The element that will have its value set to the date you picked target: targetInput, // Set to true if you want monthly to appear on click startHidden: true, // Element that you click to make it appear showTrigger: targetInput, // Add a style to days in the past stylePast: true, // Disable clicking days in the past disablePast: true }); });

Getting the clicked day

Is there a way to do it and if so, how do I get the value of the day the user clicked?

Day Names are hardcoded

Day Names option seems to be hardcoded "dayNames = []" and does not updated on line 316 // Add Day Of Week Titles

How to put background on days that are holiday?

Start date for calendar

I don't know if this is a code issue or my issue but this is the only place I see to submit a question. I am trying to get this calendar to start on the first day it has events and don't readily see where to do that. For example, the events.xml file I am loading doesn't have events until 3 months after today. The calendar loads the current month and I have to scroll through blank months to get to where my events are loaded. Does this functionality exist or what am I missing? Thanks.

How to reload events when I changet XML

Hi im am trying make different events, but if I change events.xml and I refresh browser, then nothing change.
If i delete some event, it steel appear in calendar. No refresh helps. Even if I reopen browser (mozilla)

So how can I refresh the calendar, when I change event.xml?

Thanks

"No Events" stays in list view

Hello, I'm not sure if this is a bug, but when you click on dates which has not events, it persists through, clicking on other dates without events adds to the list.

Example

Duplicated Click events

Well...

When i load the monthly plugin on a div works ok, but if i load again the webpage (by ajax) and reinitialize the plugin on the same div (now empty because it was loaded by ajax) the plugin shows up correctly but when i click on any button the click event fires 2 times.

event calendar does not work on mobile platform

Hi,

thanks for this nice eventcalendar.
are you also going to get it to work on mobile browsers (chrome, safari, etc..)?
at the moment, it's not possible to use it in one of these browsers.

thanks

error calculating days in month

When change month there's an error calculating dayQty variable with function daysInMonth, correct calling is

var dayQty = daysInMonth(m, y)

current calling is

var dayQty = daysInMonth(currentMonth, currentYear)

so number of total days of any month is the same of current month.

thanks for

best regards
Igor

All event disapear after a click on an event in day-mode

I click on the 'today' case. It enters in what I call 'day-mode'. No events today.
I go in the past (top-left arrow). The previous month (march 2016) event list is displayed.
I click on an event. Nothing happens.
From now on, if I change month, no events are displayed, even in the months where events exists. I have to reload the entire page to unblock it.
Attention: this happens in the demo at this address: http://www.jqueryrain.com/?V0HmbSvH
In the demo at the other address (http://kthornbloom.com/monthly/) that doesn't happens because when I click an event, it goes on google start page, so I have to reload the calendar page to see it again and the error is cleared.
Hope you can understand my bad english.

URL with "&" doesn't work

Hi, calendar is great! Thanks!
But I have found one little problem, if I use long URL with "&", events are not displayed.
I've tried it with XML format.
For example,
Event with <URL>index.html?mode=edit&object=123</URL>
not displayed on calendar.
Can anyone help?

There is a problem with multiple events and another problem with month forward and backward

When I have multiple events on a certain day the calendar stretches in order to show all of them instead showing a scroll par or something else.

Another problem is that when I click next month or previous it keeps generating

and doesn't remove the old ones.

I did a temporary fix for this but would appreciate if you guys will fix this.

upload data in json

How to use json instead of XML?

URL with parameters

It's possible to have a data events reading by post URL with param DateStart / DateEnd (first day of month , end day of month).

It's for dynamic read of events :)

Thanks

Weekend color number

Load another xml with click function

Hi !

Thanks for your amazing work !
I'm novice in this matter but it is possible to load an another xml with a click function ?
I have multiple xml and want to be able to change the xml with jquery .

On click button 1 > load only toto.xml
On click button 2 > load only toto2.xml
On click button 3 > load only toto3.xml

Thanks in advance !

Vincent