A jQuery calendar plugin for creating flexible calendars.
Licensed under the MIT License
A jQuery calendar plugin for creating flexible calendars.
A jQuery calendar plugin for creating flexible calendars.
Licensed under the MIT License
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
Be able to provide a feed for something like google calendar using XML or JSON
Hello
Can anyone tell me how can i make the calendar display two months at once?
Thank you in advance
I wish to integrate these code into magento will it support ? and can it be editable ?
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?
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.
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>'
How to Disable Past Dates and Print Month names instead of next and previous
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 );
} );
*/
How to add events to a date from database using php
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?
HI,
is there any posibillity of localisation, you know, in order to use different language instead of Eng.
Thanks in advance.
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.
-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
How to manage day cell height when there are more than one event? Because height is not flexible
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.
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.
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.
I need to disable past dates and make them not clickable. Is there a way to do that ?
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 );
};
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.
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?
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
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.
NOTICE : We are generating Unique ID's for Calendario 3.2.0 and above. Know more
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,
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)
Hello ,
Is there any way I can destroy current instance of the calendar
and reinitialize a new one .
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:
setData replace the content of specified date.
I need to add the content.
// day of the week
when firstDay is sunday ,the startingDay should be 7!
this.startingDay = firstDay.getDay()==0?7:firstDay.getDay();
Here is my code
<title>Events</title> <script src="js/modernizr.custom.63321.js"></script> <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>
© <img src="images/new_logo.png" alt="logo" height="30" width="30">
</div> <!-- footer div -->
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 change the language of the month, day of the week?
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
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
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
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.
Can we grey out future dates and make them unclickable?
Just wondering if this is compatible with Zepto.js instead of jQuery out of the box
Version v4.0.0 released. Check it out
Is there a way to show one week at a time?
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
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.
When creating start day as Sunday i.e startin=0 autoloads events when page loads
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.