i'm trying to use the bootstrap datepicker and i need the event changeDate. So i took the doc
$('.datepicker').datepicker()
.on(picker_event, function(e){
# `e` here contains the extra attributes
});
and i adapt it with the changeDate event
$('.datepicker').datepicker()
.on(changeDate, function(e){
alert('yolotest');
});
The sad thing is that he sees changeDate as an unknown variable (which causes the error changeDate is not defined) instead of an event.
i'm really stuck right now and i wanted to know if you have an idea on how to make this work. I don't see why he thinks changeDate is a variable instead of an event (i tried changedate , Changedate and ChangeDate , same error )
You need to have ' ' around changeDate:
$('.datepicker').datepicker()
.on('changeDate', function(e){
alert('yolotest');
});
Related
Because selectOverlap function only passes through the event being overlapped, and not the selection, it is difficult to customise how to handle event creation.
In my case, we are working on a calendar/diary system, with background events showing the employee's shifts, and events showing their individual bookings.
At this point, other than the background events - absolutely no events should be able to overlap each other.
However... on top of that - we are then overlaying 'all day events' - which might be any number of things, but for examples sake, let's say they're 'staff birthdays' - therefore, you might have a couple of events today, but there will be an event in the all day section, showing someone's birthday.
I am checking for eventOverlap and doing some other checks on eventDrop and eventResize which handle different clashes, but these only work for existing events being moved or resized. I would like to do the same on event creation - which happens during the select. In order to disallow the select of spaces which already have events, I am using the example function from the selectOverlap documentation:
function(event) {
return event.rendering === 'background';
}
This works fantastically. However, if I try to create a new All Day event, it will 'overlap' any other events that exist on that day, and not pass this check.
I was hoping to be able to use the selection's object to check it for an allDay=true, but the function is only passed the existing event, and there is no way to check the selected section.
You can see a very simplified demo here:
https://codepen.io/anon/pen/NQrxOO
Try to create an allday event on the day which already has events.
Is there a better way to do this? I can completely remove the selectOverlap and do everything in the select callback instead, but I would need to essentially duplicate the overlap checks just to make this work, and I feel like that seems like overkill for something that should be relatively simple.
Is it possible to get not only the overlapped event object, but also the selection object when doing a selectOverlap function?
Current workaround is to remove the selectOverlap check, and instead do it myself within the select callback.
Below is a simplified version of a quick function I wrote to call when using select={this.handleEventCreate}:
class Diary extends React.Component {
//additional functions, state definitions, etc etc etc here.
//Define calendarRef as it will be needed in the function below
calendarRef = React.createRef();
handleEventCreate = (info) => {
// Get the Calendar API to allow unselection
let calendarApi = this.calendarRef.current.getApi();
// Get all Events
let checkEvents = calendarApi.getEvents();
// Loop through them
checkEvents.forEach(function(event){
// If it's not a background element, check whether the new element contains the existing, or vice versa.
if(event.rendering !== "inverse-background" &&
(
(event.start >= info.start && event.start <= info.end) ||
(event.end >= info.start && event.end <= info.end) ||
(info.start >= event.start && info.start <= event.end) ||
(info.end >= event.start && info.end <= event.end)
)
){
// It is an overlapping event, so we reject it.
return calendarApi.unselect();
}
});
alert('All good here to create the event.');
//extra event creation code to fire here.
}
I'm using FullCalendar and it is working fine.
I allow users to drag events, but sometimes I need to force the event to start on a specific date. For example, some events MUST start on a Monday, so if a user drags it to a different weekday, I'll force the event move to the previous Monday.
So, on the eventDrop callback, I have something like:
jQuery('#calendar').fullCalendar({
...
...
eventDrop: function(event, delta, revertFunc) {
if (/*must force new event start date*/) {
var duration = event.end.diff(event.start, 'd');
event.start = moment('2015-07-01');
event.end = moment('2015-07-01').add(duration, 'd');
}
}
})
Some explaining:
I must calculate the original duration, because when I change the
start date, Fullcalendar assumes the end date is the same and changes
the event duration accordingly. So it forces me to assign a new end
date (is there another way to do this?)
assigning a new date to event.start works fine
assigning a new date to event.end always returns:
TypeError: Va.time is undefined
Am I missing something, or maybe overcomplicating things?
Is the error a bug?
Thanks in advance for helping me on this!
Just modify the existing moment like this:
eventDrop: function (event) {
event.start.day(1); //Move the startdate to day 1 (Monday, 0 = Sunday)
event.end.day(1); //Also move the enddate to Monday
}
jsFiddle
I'm not sure what causes the error. It looks like it has to be something to do with setting a new momentjs object in either the event.start or event.end.
I have code that stores and shows me the userID for a selected user on my leaderboard.
'click .player': function(){
var playerId = this._id;
Session.set('selectedPlayer', playerId);
}
Using the code below (in the client) if they click a button called increment it should add 5 "threat" to the selected users threat... however it doesn't. I see it try and tick over but it goes back to the original number. (i'm assuming cause it's not on the server)
'click input.increment': function(){
var selectedPlayer = Session.get('selectedPlayer');
Meteor.users.update({_id: selectedPlayer}, {$inc: {'threat': 5}});
}
So I tried to change the click to this.
'click input.increment': function(){
var selectedPlayer = Session.get('selectedPlayer');
Meteor.call('incclick','selectedPlayer');
}
And put the code below in a method on the server using a meteor.call. Still the threat does not update.
incclick: function (selectedPlayer) {
Meteor.users.update({_id: selectedPlayer}, {$inc: {'threat': 5}});
},
I am thinking it is either something about how I am using selectedPlayer in the _id: area. However I have tried a lot of things and looked around... not really sure what it is.
In your Meteor.call('incclick','selectedPlayer'); you are passing 'selectedPlayer' as a string, not the variable.
Change it to Meteor.call('incclick', selectedPlayer);
My code sometime work and some time won't work
Mongo didn't update sometimes...
But his code is work perfact
What am i do wrong?
Here is my code
http://checkboxploblem.meteor.com
https://github.com/codepawn/practice_makes_perfect/tree/master/checkbox_mongo
origin is
https://github.com/EventedMind/class-build-a-multi-page-app-with-iron-meteor-6737880d
Your problem lies in your event within the 'home.coffee' file:
Template.Home.events
'click [name=isDone]': (e, tmpl) ->
id = #_id
isDone = tmpl.find('input[name=isDone]').checked
Todos.update {_id: id},
$set:
isDone: isDone
You are assigning the first checkbox value to the variable isDone. Thus, if you check the first input box, that is what gets applied to every subsequent task.
You can get around this by retrieving the value of the checkbox from the event object. ie. e.currentTarget.checked
Another alternative is use a unique id for each checkbox and retrieve the value using that id
If an event start on a date and ends on some other date (say, next date). I want to show such events in allDay slot but don't want to mark event.allDay = true;
Any idea how can I do this ?
I modified the calendar code like this:
Find this method (for me it's on line#4467)
function renderEvents(events, modifiedEventId)
In this method find the following check:
if (events[i].allDay) { ... }
Replace it with this:
if (events[i].allDay || (events[i].end - events[i].start > 3600000) ) {
// if event spans more than a day show it in allDay area
...
}
Now any events that span more than a day will be shown in allDay area even if they are not marked 'allDay'
This was my requirement I had to do it like this. I mentioned it here in case anyone else come here searching a similar solution.