In my App,we are rendering DatePicker(calender) with the following code.It's coming perfectly.
$('#date2').DatePicker({
flat: true,
date: [],
current: '2008-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
starts: 0
});
After I render,it's coming like this.Still Html guy not yet implemented CSS.From the calendar user can select multiple dates.
we are using Backbone and Marionette in Application.What I want If user select any date from calender, needs to fire an event inside the callback function wants to console selected dates().For This I tried with following code but it's not working.
events:{
"select #date2":"consoleDates"
},
consoleDates:function(event){
console.log($(event.target).val());
}
Also I tried with change event,This is also not firing.
How can I fix this.
Use onselect. Try this:
$('.selector').datepicker({
onSelect: function(date) {
alert(date);
}
});
Update: Looking at the doc, the property for this is onChange:
onChange: function(formated, dates){
console.log(dates);
}
Ok, if you really want to use this plugin, it won't fire any DOM events. Because this plugin is little dated, I think the concept of CustomEvents haven't been introduced yet. Anyway, you would have to actually bind a custom event in the instantiation of the code. So it should look like so:
$('#date2').DatePicker({
flat: true,
date: [],
current: '2008-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
starts: 0,
onChange: function(formatted, dates){
$('#date2').trigger('datePick', arguments);
}
});
Then in Backbone it should look like so:
events:{
"datePick #date2":"consoleDates"
},
consoleDates:function(event, formatted, dates){
console.log(formatted.join(', '));
}
Related
Hello guys I'm using full calendar for my calendar. The problem I'm facing right now is I'm populating all of the events in my calendar. Now for instance if I have 10 events on a day it will all those events rather then showing 4 events and then giving a plus event to see all the other event. I can't understand why am I facing this problem. Please tell me what is it that I'm doing wrong. Here is the code through which I'm populating my event:
viewRender: function (view) {
$.ajax({
type: "POST",
url: base_url +"apps/calendar/getByMonth",
async : false,
dataType: 'html',
data: {'type': $('#formName').val() },
success: function(mark_up){
mark_up = JSON.parse(mark_up);
$.each(mark_up["task"], function() {
this.start = this.end;
});
my_events = mark_up["task"];
console.log(my_events);
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', my_events);
}
});
}
When the calendar then I make a ajax call to get all the events and then assign those events to my_events.
Use below parameter in your fullcalendar configuration
$('#calendar').fullCalendar({
eventLimit: 4, // Here
viewRender: function (view) {
// Your code mentioned in your question.
}
});
This is just an example to place eventLimit.
This works for me.
It's the full calendar default.
see
http://fullcalendar.io/docs/display/eventLimit/
eventLimit 2.1.0 Limits the number of events displayed on a day.
Boolean, Integer. default: false
Usage
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
Just use it as false.
I don't know which version you'r using, but it's strange that it isn't false as default.
I am using meteor and fullcalendar. I am trying to use the dayClick:function in my template but it is not working.
I would like the dayClick to fire when I click on the day without the use of jQuery. I understand that the way the Template.....events is setup that it will not work. I clearly do not understand some(many)thing(s).
Template:
JS
Template.calendar2.helpers({
calendarOptions: {
// Standard fullcalendar options
height: 700,
hiddenDays: [],
slotDuration: '01:00:00',
minTime: '08:00:00',
maxTime: '19:00:00',
lang: 'en',
// Function providing events reactive computation for fullcalendar plugin
events: function(start, end, timezone, callback) {
//console.log(date);
//console.log(start);
//console.log(end);
//console.log(timezone);
var events = [];
// Get only events from one document of the Calendars collection
// events is a field of the Calendars collection document
var calendar = CalEvents.findOne(
{ "_id":"myCalendarId" },
{ "fields": { 'events': 1 } }
);
// events need to be an array of subDocuments:
// each event field named as fullcalendar Event Object property is automatically used by fullcalendar
if (calendar && calendar.events) {
calendar.events.forEach(function (event) {
eventDetails = {};
for(key in event)
eventDetails[key] = event[key];
events.push(eventDetails);
});
}
callback(events);
},
// Optional: id of the calendar
id: "calendar1",
// Optional: Additional classes to apply to the calendar
addedClasses: "col-md-8",
// Optional: Additional functions to apply after each reactive events computation
autoruns: [
function () {
console.log("user defined autorun function executed!");
}
]
},
});
Here is the event
Template.calendar2.events({
dayClick:function( date, allDay, jsEvent, view ) {
CalEvents.insert({title:'New Event',start:date,end:date});
Session.set('lastMod',new Date());
}
)};
I guess I didnt have a clear enough understanding of how full calendar works. I did not need to a click event to initiate an date/event. fullcalendar already has a way to do that with dayClick: function(); I just needed to place within calendaroptions{};
dayClick: function(date, jsEvent, view) {
CalEvents2.insert({title:'NEW', start:date._d, end:date._d});
Session.set('clickedDate', tempEvent);
IonModal.open('_cal2Modal');
},
I am working on jquery fullcalendar plugin.I did code for, by default, shows entire week view but I want to display 3 day at a time and after onclick button display next days.How can I do this?
enter code here
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
});
This is explained rather well in the documentation.
What you want is probably something like this: http://jsfiddle.net/z0au4L8x/1/
$('#calendar').fullCalendar({
header: {
center: 'agendaThreeDay' // buttons for switching between views
},
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day'
}
},
defaultView:'agendaThreeDay'
});
I'm using sonata admin bundle to build an admin dashboard. I want to bind some data to a select2 enhanced select box.
The problem is that I can't alter the select2 properties after page load:
$(function(){
$("#select-brand").select2({
placeholder: "Select report type",
allowClear: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
}):
this generates the error:
Uncaught Error: Option 'data' is not allowed for Select2 when attached to a <select> element.
But even just trying to override the placeholder does not have any effect:
$("#select-brand").select2({
placeholder: "Select report type",
allowClear: true,
});
Is this relevant?
In the onload event add the following:
$('#selectId').append( $.map(data, function(v, i){ return $('<option>', { val: i, text: v }); }) );
consider this related question select2 destroy and recreate. I had to destroy and recreate the select2 to solve a problem i ran into tonight. i think this solution will work for you as well.
I am currently trying to add a qtip2 to my fullCalendar window so I could display the qtip and have a link/button to remove the selected event on the calendar, unfortunately I am having trouble with that. Here is what my fullCalendar looks like:
$('#calendar_main').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView:'agendaWeek',
minTime:8,
height:600,
maxTime:20,
editable: true,
allDaySlot:false,
theme: true,
firstDay: 1,
selectable: true,
selectHelper: true,
eventRender: function(event, element) {
element.qtip({
content: "<a onlick='alert('Remove')> Remove me</a>",
title: {
text: 'RDV',
button: false
}
},
position: {
at: 'right-bottom'
},
show: {
solo: true
},
hide: false,
style: 'ui-tooltip-light ui-tooltip-rounded'
});
}
});
I believe the issue sits within the content attribute of qtip, but not sure why this does not work. In this case I am just trying to display an alert, but it is not working (The Qtip displays, but when I click on "remove me", nothing happen. Once I get that working, I will be able to replace the Alert with my own JS function that will remove the selected event in my DB.
ps: I am working with Adobe Air, not sure if this could be an issue.
Well for one, you need to escape the single quotations to form the string in the alert.
And second, you forgot to close the alert with a single quote in the tag. Hope it helps...
'<a onlick="alert(\'Remove\');"> Remove me</a>'
This is how it should look.
probably couse you are using call procedure for qTip but in real you are using qTip2. Use in real (source script) old version qTip 1.00xxx and all will be ok - I did do it.
I am actually doing the same thing and I can remove it fine. The only issue I run into is when the event is destroyed the qtip sticks around so running into an issue where eventDestroy never gets called.
Anyway I call calendarEventRender:
$('#calendar').fullCalendar({
firstDay: 1,
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agendaWeek',
allDaySlot: false,
columnFormat: {
week: 'ddd'
},
selectable: true,
selectHelper: true,
editable: true,
droppable: true,
eventRender: function(event, element) {
calendarEventRender(event, element);
}
});
Here are my functions:
function calendarEventRender(event, element)
{
element.qtip({
content: {
title: { text: event.title },
text: '<button type="button" onclick="removeEvent(' + event.id + ')">Delete</button>'
},
show: {
event: 'click',
solo: true
},
hide: {
event: 'unfocus click'
}
});
}
function removeEvent(eventId, userId)
{
//Delete the event
$('#calendar').fullCalendar('removeEvents', eventId);
}
And it all seems to work. I don't have time to go through and grab your code, but hopefully this helps. Also in the future if you can get a http://jsfiddle.net/ of it up not working people can test and fix it a lot easier.
Hmm so I created a jsfiddleto test it all: http://jsfiddle.net/MusicMonkey5555/pZdyt/1/
and it seems to not work in there. My guess is that it is jquery or qtip or fullcalendar version. That is the one issue with jsfiddle is getting the correct version of everything. The one I have working on my site are the following:
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css
So I would suggestion trying to use those versions and see if it works. Most often it is because jquery has a bug and you need a different version.