brospars / simple-calendar Goto Github PK
View Code? Open in Web Editor NEWSimple calendar jquery plugin
Home Page: https://brospars.github.io/simple-calendar
License: MIT License
Simple calendar jquery plugin
Home Page: https://brospars.github.io/simple-calendar
License: MIT License
Try click btn-next it "skips" a month...
from july - august OKAY
fromt august - october ERROR
Now click btn-prev "BAMM" september is back?
Thanks for a great script :)
fixedStartDay
= 3 but still the calendar month starts with monday.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="simple-calendar.css" />
</head>
<body>
<div id="container"></div>
<script src="jquery.js"></script>
<script type="text/javascript" src="simple-calendar.js"></script>
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery("#container").simpleCalendar( {
months: ['january','february','march','april','may','june','july','august','september','october','november','december'],
days: ['sunday','monday','tuesday','wednesday','thursday','friday','saturday'],
displayYear: true,
fixedStartDay: 3,
displayEvent: true,
disableEventDetails: false,
disableEmptyDetails: false,
events: [],
onInit: function (calendar) {},
onMonthChange: function (month, year) {},
onDateSelect: function (date, events) {},
onEventSelect: function() {},
onEventCreate: function( jqueryel ) {},
onDayCreate: function( jqueryel, d, m, y ) {}
} );
} );
</script>
</body>
</html>
Hello,
First of all thanks for your work.
When I write this:
container.empty().data('plugin_simpleCalendar', null).simpleCalendar({
displayEvent: true,
events: events
});
It refreshed the events in the month view (the blue dots appear on the correct dates) but the previous events remain the same: if I click on a date when there was an event, I can still see it in the list of the events of the day.
I tried to solve this issue: https://stackoverflow.com/questions/69754113/is-there-a-way-i-can-empty-my-object-to-make-new-dates-able-to-be-inserted-ont/69755768#69755768
Change JAN to FEB so updated MAR check your code !
thanks!
Is this possible?
Hi @monsterbrain ,
I wish to merge your awesome work on displaying events and the demo page but their is to many changes and some unwanted changes. What I would want is :
I think I could cherry pick some of your work to new branches and create new PRs from that branches.
What do you think ?
Events :
Events are an array of event (based on iCal standard if possible, even if we don't support the whole thing)
events: [
{
summary: string
dateStart: timestamp
dateEnd: timestamp
},
...
]
Sorry, I am new. Can you provide an example of how to add an event on a specific date?
heres my event, is't correct format?
events: [
ย
{
startDate: 2020-08-05,
endDate: 2020-08-10,
summary: 'lorem ipsum 1'
}
,
{
startDate: 2020-08-07,
endDate: 2020-08-10,
summary: 'lorem ipsum 2'
}
,
{
startDate: 2020-08-09,
endDate: 2020-08-09,
summary: 'lorem ipsum 3'
}
],
Hi
I like this plugin so much. Can you please add an option to disable Event details popup and one more can you tell me how i can get event date selected on onEventSelect, I hope you reply soon
Thanks for awssome plugin btw
fixedStartDay: false does not put Sunday as the first day of the week
I think these two properties are ignored
disableEventDetails: false, // disable showing event details
disableEmptyDetails: false, // disable showing empty date details
I made this library some years ago and never updated it. I don't use it often but I could work on it if someone is interested...
Todo :
Hi,
it looks like month navigation is missing in the current version of the code.
At least, this part is suspicious:
var calendar = $('<div class="calendar"></div>'); var header = $('<header>' + '<h2 class="month"></h2>' + '<a class="simple-calendar-btn btn-prev" href="#"></a>' + '<a class="simple-calendar-btn btn-next" href="#"></a>' + '</header>');
There seems to be missing "<" and ">" .. as it was in some previous version. Or maybe it's solved now differently, but when I download the current version and open index.html, month navigation buttons are missing.
Thank you
Martin
great plugin!
is it possible to reset the calendar event data ?
i tried using this
calendar.empty().simpleCalendar({})
but it simply disappears and doesnt load again.
pardon me for interrupting. But How can i get an instance of the plugin, in case I need to update the values on month change. I tried assigning to variable and calling var.simpleCalendar.function() but did not work. Any help would be appreciated..
Originally posted by @monsterbrain in #2 (comment)
Add examples of differents configs and usages with events
...and when the last day of the month is falls on Sunday, the week is not displayed.
Great work, thank you for your library
Is there any feature to have a Persian (Shamsi) Calendar in this library?
Eg, if someone is viewing events in the US, there will be at a certain time.
but those same events need to appear at different times for someone viewing them in the UK.
Does Simple Cal support this?
Also - is there demo page somewhere to see how the various options work?
Thanks!
Hello!
Just a question. Is it possible to update Events after initialization?
I tried calling again $calendar.simpleCalendar( { events: myEvents } )
but without much success, but maybe I'm doing something wrong.
Thank you :)
The plugin is perfectly working on ( Chrome / Opera / Firefox ) - But when I open it on Safari the calender is perfectly visible but inside it the events and notable event dates are not visible.
jQuery(document).on('click', '#showEventsTab', function(e){
e.preventDefault();
var event_calender = '<div class="events-calender-wrapper"><div id="eventCalender"></div></div>';
jQuery('.events-intro-title > a').removeClass('tab-active');
jQuery(this).addClass('tab-active');
jQuery('.custom-paging-row').hide();
jQuery('#signupEventContent').html(event_calender);
var calContainer = jQuery(document).find('#eventCalender').simpleCalendar();
let CalenderInstance = calContainer.data('plugin_simpleCalendar');
jQuery.each(cs_object.event_object, function(index, val) {
var newEvent = {
startDate: new Date(val.ev_date).toISOString(),
endDate: new Date(val.ev_date).toISOString(),
summary: '<a href="'+val.ev_link+'">'+val.ev_title+'</a>'
}
CalenderInstance.addEvent(newEvent);
});
});
The plugin is still useful on today's era,who wants simple integration,can we have option to add disabled dates? as I see a relevant class is added - .wrong-month
Requirement is simple,I would like to show all dates of a month disabled unless it's not in the event list array unlike now showing enabled all the dates.
$("#event-cal-container").simpleCalendar({ //disabled : true,//this feature we are looking for events: ['2019-03-04', '2019-03-08', '2019-03-12', '2019-03-15'], eventsInfo: ['John\'s Birthday', 'Janet\'s Marriage','Graduation Day', 'Final Exams !'], selectCallback: function(date){ console.log('date selected '+date); }, insertCallback: function(date){ //console.log('date selected '+date); } });
Originally posted by @findela in #4 (comment)
Hi,
Just loaded the demo page. Jquery is not loading due to http. please check.
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.