jwgmeligmeyling/jqm-calendar

Simple iOS-style calendar plugin for jQuery Mobile for both showing activities or picking dates

jqm-calendar's Issues

Display evends in the calendar

I have been using jqm-calendar for a while now and i need to be able to show event information right in the calendar is it possible ?

Removing initial click

When the calendar initially loads, it automatically clicks today's date. Is there a way to prevent it from automatically selecting an active date? I would like to redirect to another URL when a date is clicked, and it seems to easy to do this in the:

element.bind('change', function(event, begin) {
location.href="someURL";
}

refresh not working

HI,
when i add an new event to the exiting event array,the new event is not shown,
but it happens to visible only after clicking prev or next button in calender.
I have called refresh function but no luck.can anyone help me ?

Allow for themes

I tried writing <div data-role="content" data-theme="e">, but it only applies to the half of the page. Specially, not to the calender itself.

Ignore button when searching for events

This is a good plug-in just found, but I am struggling with the events. I saw the code on the guide on how to look for events, but clicking on the previous and next button to switch between months also triggers an event. Is it possible to stop the button's from triggering an event and only trigger an event when you click on a date?

Change in calendar options does not get triggered after refresh

My app can change language on the fly.
I change the options of the Calendar to have months and days in another language.
Calling "refresh" does not update the text...
Am I missing anything?
Thanks!

Last version does not work (at least on Chrome desktop and mobile)

Hi,

I've downloaded last version but it does not show the days in the calendar. I can only see an horizontal line.

Add version header

Add a version header to jw-jqm-cal.js and jw-jqm-cal.css so anyone can easily see what version is at hand.

Dates

Is there a way to get the Date from the current selected Date?

Problems to see the correct Date

When i use the data the field month or day get me -1 if i use the month 03 the calendar show me febrary

API (for dynamically creating events)

Although the visual format is pretty good for jqmCalendar, unless you publish the APIs or a "how-to", this is almost useless as a dynamic calendar. There is no information about how to add/change an event and the read-me file is too small to even be considered somewhat useful.

Issues with jQuery Mobile 1.4.2

I've received this message in my mailbox lately, haven't been able to confirm or fix this issue yet.

Scenario 1:

In the demo.html file on the GitHub repository. The only changes I would make to the file is making use of the versions jQm 1.10 and 1.4.2 and by doing so I notice that the page is completely blank. The calendar does not show or is not visible.
Scenario 2:  

In the demo.html file, if I leave the versions jQm 1.8 and 1.2.0 as is and replace only the CSS with my own custom CSS then the calendar is visible and I can click on it. So as an example my file would look like this:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/CrossTrainTHEME.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

<link rel="stylesheet" href="jw-jqm-cal.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jw-jqm-cal.js"></script>

<script type="text/javascript">
$("#view-calendar").live('pageinit', function(event, ui) {
   $("#calendar").jqmCalendar({
      events : [ { "summary" : "Test event", "begin" : new Date("2013-02-05 00:00:00"), "end" : new Date("2013-02-07 00:00:00") }, { "summary" : "Test event", "begin" : new Date(), "end" : new Date() }, { "summary" : "Test event", "begin" : new Date(), "end" : new Date() } ],
      months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      startOfWeek : 0
   });
})
</script>

I tried to figure this one out but my guess would be that there is something in the later jqm versions that may have been deprecated that could still be used in the jw-jqm-cal.js file. 

Highlight date cells

Can I highlight certain dates and perform some custom action like redirecting to a new page on clicking those highlighted cells?

Wrong next month

Hi there,

When you are on August and click on "Next (month)", the next shown is "October".

Please, test at http://jsfiddle.net/Gajotres/f6xeE/light/ also tested locally and "September" is missing.

Thanks in advance.

Prevent 4 week months, always add at least 1 day before

fixes, either:

• When days before is 0, set it to 7
• Always show 6 rows
  both probably require some additional work

Color codes for events versus color codes for amount of events on a date

I found this answer on Stackoverflow implementing color codes for events: http://stackoverflow.com/questions/18782689/how-to-change-the-background-image-on-particular-date-in-calendar-based-on-event . Maybe we should implement this instead of the current colorcodes for activity.

Plugin can be initialised twice and then creates multiple instances

Fix : limit the number of instances

Taphold

I'm having two problems linked to Taphold:

1- I cannot avoid on android and Windows phone (not tried on iOS) the browser contextual menu to appear despite using any or all the following:

    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();
    return false;

I know it's not a jqm-calendar issue but I'm wondering if anyone found a workaround...

2- I would need to retrieve the "tapholded" date once pressed on the cell but I'm struggling in it... tried

$("#calendar").bind('taphold', function(event, date) {
}

but I get "undefined" date

Thanks

Linking the events

If a declare: "summary" : "<a href='http://github.com'>Test event</a>", then I get a jQm-typical full width link, but the date and the label get split in two lines with the date losing top and left padding, whilst the second event remains all in one line. That's ugly.

Enable dynamic loading of events

The current code demands passing in an array of events. This is fine if the array of events is very small, but can become more problematic if the number of events on days begins to get large. It would be ideal to enable dynamic loading of events, essentially allowing users to pass in callback functions to return:

1. importance of a day
2. list of events on a day

This would allow users to dynamically load events from a e.g. database on demand and handle caching on their side.

I will shortly submit a pull request with a suggestion for how the above should be implemented. It doesn't change much code and still retains the default behavior if the user doesn't submit an event handler in the options.

Update issue

Hi there,

there is something strange that happen when I try to refresh the list of events.
So my situation is this one:

• user explore the calendar and let's say an event is showed into listview
• now the user come back to another view and add some events
• users can now check if the event just created is the calendar view

How can I trigger the refresh of the listview?
$("#calendar").trigger("refresh"); seems not working as well as $("#calendar").trigger('refresh', date); where date is today.

Can you help me, please?

Thanks!

Dynamic Creation from AJAX

I am trying to populate the events array from an AJAX function that returns calendar events. There was another issue about dynamically creating events, I have that working by creating a global array and making events equal to it. The only problem is that the events were still hardcoded. I tried putting the below Ajax function in refresh(data), and it works well, however the bullet that appears when there is an event that day would not display. If i go forward a month, and then back, then it works. I'm not sure it won't do that, I am putting the AJAX function before the addCell is called in refresh. I have also tried triggering a refresh, but that is not working.

I also modified the html and removed the javascript from there. I have all of the javascript inside of jw-jqm-cal.js and it works just fine, however i cant get this part to work.

Any ideas? Thanks!

Example of the AJAX call:

         $.ajax({
                url: '..localhost/sample',
                dataType : 'xml',
                success: function(data){           


                $.each(data, function(index, newappt){ 
                eventsArray.push({ "summary" : newappt.subject, "begin" : new Date(newappt.startTime), "end" : new Date(newappt.endTime) });    

         });

       },
        }); 

new Date(2015,09,05,10,30) format shows up 1 month later

When using the new Date(2015,09,05,10,30) format for dates, the event shows up 1 month later. In this case, October instead of September.
Dates in the format of: new Date("2015-09-05T10:30") show the event on the correct month.

new Date("..string") example code does not work in all browser (Safari)

The calendar is not showing any events in safari

Add class today to current date

Enhancement;
in the "addCell" function:
var today = new Date();
if (date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()){
$td.addClass("today");
}

Removing all events and adding new ones but keeping the calendar

Is it possible to reload all events? I have managed to add new events the way you explained in another issue "API (for dynamically creating events)", but If I havent managed to remove all events and load new ones without reloading the whole calendar.

Calendar not working in Compiled APP.

I have the plugin working very well on my browser but not displaying on my app page. That is i compile my app with adnroid studio and page no more loads calendar. I have added a refresh button on the page through javascript. it works on my browser yet app page still loads empty. Thank you. I have even compiled and tested the demo from this page and still does not work in app.. what could be the issue. Thanks in advance

Disable past dates

I really like this calender but I am struggling with preventing past date. Is there a way to prevent the user from clicking on a past date. possibly greying it out.

Give it a license

This calender is simple and sleek, that's nice. What if I want to use it soon, what is the license applied? MIT, GPL?

List ex 5 upcoming events on initialize and month change

Hi.
Is it possible to add a function to display example, 5 next/upcoming events on initialize, and to display "current month events" on "monthchange".

initialize:
(Calendar)

Upcoming events:

(list-5-upcoming events for whole period)

"next month example"
(Calendar)

January Events:

(list-5-items)

"next month example"
(Calendar)

February Events:

(list-5-items)

Add support for JSON event feeds

Support the automatic fetching of events via Ajax from a JSON feed. Possibly similar to the fullcalendar implementaton.

http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Current day class "ui-btn-active" activates on every month

I have fixed this issue by adding this :

LINE 190
var thisMonth = new Date();

then

at LINE 191
addCell(row, new Date(year, month, daysInMonthCount), false, daysInMonthCount === date.getDate() );

becomes

addCell(row, new Date(year, month, daysInMonthCount), false, daysInMonthCount === date.getDate() & month === thisMonth .getMonth());

// Current month
while ( daysInWeekCount < 7 && daysInMonthCount <= daysInMonth ) {
      var thisMonth = new Date();
      addCell(row, new Date(year, month, daysInMonthCount), false, daysInMonthCount === date.getDate() 
       & month === thisMonth .getMonth() );
       daysInWeekCount++;
       daysInMonthCount++;
}

full year view

is there an option to show whole year on one page?

CSS in Firefox

Fix the problematic Firefox visual look, it is distinctively different then webkit visual look, mainly because some CSS definitions are missing (Firefox related).

Question: What would be involved in upgrading jqm-calendar to JQM 1.4.5?

Just wondering if you have an upgrade in your roadmap.

I started an attempt to upgrade jqm-calendar to JQM 1.4.5, but seems the only upgrade guide available for JQM is from 1.3 to 1.4. Ultimately, I just need a Flat UI theme and there are free ones available, but only for JQM 1.4.

My plan now is to create a flat custom JQM theme for 1.2.1 and move on.

demo

is there any place with a demo?

eventhandler must contain all events in order to work

Hi,
I defined custom eventHandler but in odrer to work, you need to redefine all events (even if don't want to).
I modified the way the settings are defaulted adding true to the recursive. This way, undefined events are correctly defaulted
plugin.settings = $.extend(true, defaults, options);

it solved my problem :-)

I quit new to github and I don't know if I must/can submit a patch for such simple modification ?

Buttons to change year

Would it be possible to add year buttons (maybe in a inner position compared to the months buttons) to enable a quick move from year to year?
Thanks!
Luigi