codrops/calendario

A jQuery calendar plugin for creating flexible calendars.

Calendario

A jQuery calendar plugin for creating flexible calendars.

article on Codrops

demo

github demo

Licensed under the MIT License

calendario's Issues

How to load data with AJAX?

I need to load event data with AJAX for current month and when click on prev or next month to load data with ajax for those months.

months go missing

Hi there, First of all great plugin! thanks for sharing :).
I am using the brother or demo2 calendar of this plugin. In our app there is a reminders page with the calendar, but when ever this page loads for the second time and one navigates to the next and previous month, it skips over some of the months. For example the current month shows June, when next is clicked it hops to August and then to October...very odd and no obvious pattern.
I am thinking that the issue is with something not being reinitialized properly? Is there anyway that one can destroy the calendar control before its added to the page.?
Thanks again

change date display in data.js

Hello,

Can the format in which the date in being displayed in data.js be changed ?

Ex to :
'24-08-2015' : 'Event 1',
'24-08-2015' : 'Event 2',

Thanks,

startday as sunday auto loads events when page loads

When creating start day as Sunday i.e startin=0 autoloads events when page loads

Add/Remove Event Examples

Are there any examples that show how to add/remove event data besides the commented code in the demo? Would be super cool to see this in the repo as well.

// you can also add more data later on. As an example:
/*
someElement.on( 'click', function() {

    cal.setData( {
        '03-01-2013' : '<a href="#">testing</a>',
        '03-10-2013' : '<a href="#">testing</a>',
        '03-12-2013' : '<a href="#">testing</a>'
    } );
    // goes to a specific month/year
    cal.goto( 3, 2013, updateMonthYear );

} );
*/

Week view

Is there a way to show one week at a time?

Support more than one event per date

Hi,

It is possible to create two are more events for the same date?

I tried this:
'04-12-2013' : 'Event1',
'04-12-2013' : 'Event2'

The plugin take only the last date. So, I can see Event2 but not Event1.

@addData

setData replace the content of specified date.
I need to add the content.

How can we load events month wise only when that month is selected

How can we load events(data) month wise when previous or next button is clicked.
Default I need to load only current month data. While clicking the previous or next button I need to load that months data.

Get you Unique ID

NOTICE : We are generating Unique ID's for Calendario 3.2.0 and above. Know more

Demo 2 - not show month with multiple events

I find a problem with index2 using multiple events in one day, if you go to next month, then you cannot get back to the month with the multiple events, it will give a error in the console: Uncaught TypeError: Cannot read property 'split' of undefined

v4.0.0

Version v4.0.0 released. Check it out

Destroying Current Instance of calendario

Hello ,

Is there any way I can destroy current instance of the calendar
and reinitialize a new one .

How to Disable Past Dates and Print Month names instead of next and previous

How to Disable Past Dates and Print Month names instead of next and previous

calender destroy and re-init calender

Block Multiple Dates

Hi there,

I have some events that last several days, so I need to block an interval of dates. Is possible to block from May 20th to June 10th 2016 as one event (with Start Date and End Date)?

Thanks

Ability to provide a feed for events

Be able to provide a feed for something like google calendar using XML or JSON

don't support ie8?

Demo1

Hi - Love your calendar and other features in codrops. I really want to use your full page calendar but I can not figure out how to change the css to be in a container of fixed width and height.

Can you give an example using the (Full Page) calendar but have it be in a container whose width is 400px and height 300px

http://tympanus.net/Development/Calendario/index.html

Viewing Month Question

Is there a way to store the month someone was viewing when they left the page and if they hit the back button it loads the calendar on the month they were previously viewing before or is that going to be some custom code?

Fill dates for empty cells

EX: JUNE 2014 has 6 first empty cells and 6 last empty cells, I want to get 6 dates of MAY month and 6 dates of JULY month to fill for the these empty cells. Please help me

_checkUpdate is calling for a file with "text/plain" mime type

Whenever I plug-in the Calendario script I get a console message:

Refused to execute script from 'https://raw.githubusercontent.com/codrops/Calendario/master/js/update.js?_=1491572472422' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Context:

• I have a legacy version of Chrome (49.0.2623.112 m) Since I'm using Windows XP and older versions are not supported
• I'm using jQuery 3.2.1
• This error doesn't seem to affect the display of the calendar (When I comment out the ajax call on "_checkUpdate" I get the same page as before)
• When I visit the demo at "https://tympanus.net/Development/Calendario/index.html" I don't get this error, I don't know why.

Demo 2 (or Index 2) Support for multiple events on one day...

Are you able to update the second demo (Demo 2) to support multiple events on one day?

    '10-16-2013' : '<span>Event #1</span>',
    '10-16-2013' : '<span>Event #2</span>'

Event showing up a day later on Calendar

We are using Calendario in our website but the issue is that the event shows up on the next day. If we pass the caldata as

'05-01-2015':'My event HTML content'

The event appears on 2nd May, 2015. How to resolve the issue?

IE 11 - Columns are thrown off at certain widths

This happens every few pixels as I resize the browser. Saturday and Sunday become extra wide, and the layout gets very weird.

Past and Future Dates

Hai

I have worked on displaying the past and future dates.

It is working fine....

Sample is here.

Best,
nishadotcom

Localisation

HI,

is there any posibillity of localisation, you know, in order to use different language instead of Eng.

Thanks in advance.

How do I add events to the codrops calendario? I am new to jquery and php

Here is my code

<title>Events</title> <script src="js/modernizr.custom.63321.js"></script>

• Home
• Gallery
• Events
• Music
• About
• Contact

Events

	<div id="diary">	
	<div class="custom-calendar-wrap custom-calendar-full">
		<div class="custom-header clearfix">
			<h3 class="custom-month-year">
				<span id="custom-month" class="custom-month"></span>
				<span id="custom-year" class="custom-year"></span>
					<nav>
						<span id="custom-prev" class="custom-prev"></span>
						<span id="custom-next" class="custom-next"></span>
					</nav> <!-- calendar nav div -->
			</h3>
		</div> <!-- custom-header clearfix div -->
		
			<div id="calendar" class="fc-calendar-container"></div>
	</div> <!-- custom-calendar-wrap custom-calendar-full div-->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.calendario.js"></script>
	<script type="text/javascript" src="js/data.js"></script>
	<script type="text/javascript">	
		$(function() {
		
			var cal = $( '#calendar' ).calendario( {
					onDayClick : function( $el, $contentEl, dateProperties ) {

						for( var key in dateProperties ) {
							console.log( key + ' = ' + dateProperties[ key ] );
						}

					},
					caldata : codropsEvents
				} ),
				$month = $( '#custom-month' ).html( cal.getMonthName() ),
				$year = $( '#custom-year' ).html( cal.getYear() );

			$( '#custom-next' ).on( 'click', function() {
				cal.gotoNextMonth( updateMonthYear );
			} );
			$( '#custom-prev' ).on( 'click', function() {
				cal.gotoPreviousMonth( updateMonthYear );
			} );
			$( '#custom-current' ).on( 'click', function() {
				cal.gotoNow( updateMonthYear );
			} );

			function updateMonthYear() {				
				$month.html( cal.getMonthName() );
				$year.html( cal.getYear() );
			}

			// you can also add more data later on. As an example:
			/*
			someElement.on( 'click', function() {
				
				cal.setData( {
					'03-01-2013' : '<a href="#">testing</a>',
					'03-10-2013' : '<a href="#">testing</a>',
					'03-12-2013' : '<a href="#">testing</a>'
				} );
				// goes to a specific month/year
				cal.goto( 3, 2013, updateMonthYear );

			} );
			*/
		
		});
	</script>

</div> <!-- diary div -->
	</div> <!-- empty div -->
				<div id="footer">
					<a href="https://www.facebook.com/Heyitschloechristine/"> <img src="images/facebook.png" alt="facebook" height="30" width="30">
				    <a href="https://www.youtube.com/channel/UCDZNCJjqDD6qWBm73AGd2Tw"><img src="images/youtube.png" alt="facebook" height="30" width="30">
					<a href="https://www.instagram.com/chloechristinemusic/"><img src="images/instagram.png" alt="facebook" height="32" width="32"><br><br>
					&copy; <img src="images/new_logo.png" alt="logo" height="30" width="30">
				</div> <!-- footer div -->

Add a data attribute to dates

I need to access unique dates through Jquery.

With a data attribute e.g. data-date this would be possible.

A format like YYYMMDD would make it an incremental serial that is accessible and unique.

Compatible with Zepto?

Just wondering if this is compatible with Zepto.js instead of jQuery out of the box

DEMO1 Multiple Events Issue

It seems DEMO1 can only support 3 events shown on a single day?

Can we add a "more" link to pop a small window for showing the rest of the events?

getCell Method Bug

I have come across a bug in the getCell Method were the var row = -1.

This seems to happen when you try to get the 1 day of the month when its the last item in the first row.

E.g Sunday 1 Nov 2015

Calendario demo 2 - with the current day event automatically loading when page loads

I'm seeking advice or a solution to the Calendario demo 2 so that it opens with the current day event open automatically as it loads the page or in my case it will be a daily maths question as well been able to have the click function to open the event .

My Files are accessible here :
https://github.com/thomach/Calendario8

I have tried various methods in using the following function

$(document).ready(function(){

        //  

        });

But I'm not sure of what the code would be to for this to work.

I am assuming it is relation with line:

$events.append( $contentEl.html() , $close,$showAnswer ).insertAfter( $wrapper );

or the whole function when clicked:

function showEvents( $contentEl, dateProperties ) {

                hideEvents();

                var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Maths Starter for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
                    $close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );



                    $showAnswer= $( '<span class="custom-content-showanswer showAns"></span>' ).on( 'click', showAnswer );








                $events.append( $contentEl.html() , $close,$showAnswer ).insertAfter( $wrapper );




                setTimeout( function() {
                    $events.css( 'top', '0%' );
                }, 25 );



            };

How to add events to a date

How to add events to a date from database using php

feature request

Realy like this plugin,
Please add rtl support for the calendar or
give the the css classes I need to add the rtl support for.

Grey out future dates

Can we grey out future dates and make them unclickable?

Show multiple months

Hello

Can anyone tell me how can i make the calendar display two months at once?

Thank you in advance

Calendario + day display

Hello,

I need to display the day and event as below :
'24-08-2015' : 'Event 1',
'24-08-2015' : 'Event 2',

can someone please help me on the above.

Thanks

Lots of Questions.

-Is there anyway I can have this Calendar pull Data from a Google Drive Calendar?
I have an XML with the Data but where would I input the address?
-Any Way to Add an Event that last 3 Days?
For Example, a "Vacation" that runs the 5-8th of a Month.
-Also How do I add Multiple Events on a Single Day.
-I would also like to Try Multiple Event Categories (Meeting, Events, Special Events) Maybe Represented by different Colors

Hide weekends on calendar

Hello.

I need to hide weekends on the calendar. To only Monday through Friday. Saturday and Sunday to not display at all. Is it somehow possible to achieve?

Thank you for your response.

Can't send date to js

Hello!

I try to add event. After page loading, and calendar is done, i send request (ajax/php) to get data.
$.ajax({ type: "POST", url: '/ajax/getListEvent.php', dataType: 'json', data: ({ action:'getlist', month: 3, year: 2017, }), success: function(data) { $.each(data, function(i, item) { date = item.date; var img = item.img; cal.setData({ date : '<img src="'+img+'" />' }); }); } });

And get error in jquery.calendrio.js in 96 string.

if(/^\d{2}-\d{2}-\d{4}/.test(key) || /^\d{2}-\d{2}-YYYY/.test(key) || /^\d{2}-DD-YYYY/.test(key) || /^MM-\d{2}-YYYY/.test(key) || /^\d{2}-DD-YYYY/.test(key) || /^MM-\d{2}-\d{4}/.test(key) || /^\d{2}-DD-\d{4}/.test(key) || key == 'TODAY') {} else console.log(key + ' is an Invalid Date. Date should not contain spaces, should be separated by \'-\' and should be in the ' + 'format \'MM-DD-YYYY\'. That ain\'t that difficult!');

If i try show key and val

console.log(key, val);

see that:

date <img src="/upload/558/114_80_2/123.jpg" />

I understand that the variable date has not been transferred. How can I transfer it?

I apologize for the bad english
I am hope for your help!

How to disable past dates in Calendario.js and How to color or mark every Sunday or any specific day in Calendario

I need to disable past dates and make them not clickable. Is there a way to do that ?

day cell height

How to manage day cell height when there are more than one event? Because height is not flexible

Editable Calendar

I wish to integrate these code into magento will it support ? and can it be editable ?

HTML based templates

Currently the templates are stored in the response data rather than the JavaScript. It'd be much more efficient if the templates were stored in the JavaScript and the response data was used to fill in said templates.

language

how to change the language of the month, day of the week?

The problem of startingDay

// day of the week
when firstDay is sunday ,the startingDay should be 7!
this.startingDay = firstDay.getDay()==0?7:firstDay.getDay();

Add event to every day

Sir, how can I add event to every day.
I mean when I click every single day, it will show the event box.
Thank you, sir.

How can we give different color for days based on holidays and off days.

In calendario some of the days may be holidays and sat,sun is off days. In this case how can we give a different background for the column. (as one provided for current day)

Can it handle 'time' display as well?

This is a great calendar. Is there plans to add 'time' display?
I see that this is based on the http://jszen.blogspot.pt/2007/03/how-to-build-simple-calendar-with.html

Are you planning on going further in developing this calendar?

I would simple expand the parser
// based on http://stackoverflow.com/a/8390325/989439
_isValidDate : function( date ) {
to handle time and timezone.

Also, thedata parser could check to see if the label was a simple string or a more complex 'json serialized objec't and then you could add in as many parameters as needed for event display.