Fullcalendar js event overlap - javascript

I use fullcalendar js jquery plugin which is a great plugin but I have a small question do you know how:
I have a list of events which always not overlap.
Then sometimes I need to resize an event to be 1 or 2 hours much longer. The real step is here I try to make the next event to be not overlap but to move according to the resized end event. I have tried with event overlap custom function but it doesn't really work. There is always a gap of minutes between the two events.
I will send you a fiddle tomorrow to show you where I am.
/EDIT/
Just Create this Codepen :
http://codepen.io/cchumi/pen/pEGLXd
Javascript example for overlap :
eventOverlap: function(stillEvent, movingEvent) {
//Update MovingEvent
$('#calendar').fullCalendar('updateEvent', movingEvent);
//swap stillEvent time with movingEvent
stillEvent.end = stillEvent.end;
stillEvent.start = movingEvent.end;
//Update stillEvent
$('#calendar').fullCalendar('updateEvent', stillEvent);
//return true to allow swap.
return true;
}

it's been a while since your post but I think that I got a solution for you, I was looking your code and understood that, at the moment that the events overlaps the eventoverlap function is triggered, so I just add an event listener .mouseup() before your code to stop the trigger of your code until you release the click of the mouse. Now it works perfectly.
Now your code has to look like this:
eventOverlap: function(stillEvent, movingEvent) {
$('#calendar').mouseup(function() {
var movingEventEnd = moment(movingEvent.end).utc().format();
//"YYYY-MM-DDTHH:mm:ss"
var StillStart = moment(stillEvent.start).utc().format();
var StillEnd = moment(stillEvent.end).utc().format();
var duration = moment.duration(moment(StillEnd).diff(moment(StillStart)));
var hoursbaseStillEvent = duration.asHours();
console.log("Still Hours Base " + hoursbaseStillEvent);
$('#calendar').fullCalendar('updateEvent', movingEvent);
var movingEventNewEnd = moment(movingEvent.end).utc().format();
var durationMovingEvent =
moment.duration(moment(movingEventNewEnd).diff(moment(movingEventEnd)));
var hoursMovingEvent = durationMovingEvent.asHours();
console.log("hourss " + hoursMovingEvent);
stillEvent.start = moment(movingEvent.end).utc().format();
var StillEventStart = moment(stillEvent.start).utc().format();
console.log("StillEventStart " + StillEventStart);
var StillEventEnd = moment(stillEvent.end).utc().format();
var Startdate = moment(StillEventStart).utc().format();
console.log("Startdate " + moment(Startdate).utc().format());
var Enddate = moment(StillEventEnd);
var StillEventEndNew = moment(Startdate).add(hoursbaseStillEvent, 'hours');
console.log("StillEventEndNew " + moment(StillEventEndNew).utc().format());
stillEvent.end = moment(StillEventEndNew).utc().format();
$('#calendar').fullCalendar('updateEvent', stillEvent);
});
return true;
//return stillEvent.allDay && movingEvent.allDay;
},

Related

Why does $(document).getElementbyId not work in this function while just document.getElementbyId works?

This is the function. I am including Jquery library from Google CDN and it is before this script.
{
$(document).ready( function() {
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// This gets a "handle" to the clock div in our HTML
//This does not work???
var clockDiv = $(document).getElementById('clock');
//This works though
var clockDiv = document.getElementById('clock');
// Then we set the text inside the clock div
// to the hours, minutes, and seconds of the current time
clockDiv.innerText = hours + ":" + minutes + ":" + seconds;
}
// This runs the displayTime function the first time
displayTime();
});
}
As others have mentioned, to achieve the same functionality as you would using just the Web API for Document with jQuery, you would use a selector instead. As Arun P states, you would do
var clockDiv = $('#clock'); // select the div with an ID of clock
clockDiv.text( /* your text */ ); // set the text of the selected element to the passed argument
jQuery is a library the abstracts the Web APIs to help with cross-browser compatibility issues and to generally make navigating and manipulating the DOM a bit easier.
to set text in a div
$('#clock').text('some text');
Because jQuery returns the document information differently. If I remember correctly it would have to be:
$(document)[0].getElementById('clock');

How to seek with AudioContext

I would like to create buttons that will play next/prev song on click, but they should seek the music on long press.
I did manage to change songs, but I couldn't find the seek methods. Also how to make it play from beginning?
And is there a way to determine how much have passed since the beginning of the song? I found that buffer have duration, but no sing of actual play time.
At init:
context = new (window.AudioContext || window.webkitAudioContext)()
To play song:
var buffer = song.buffer
var source = context.createBufferSource()
source.buffer = song.buffer
source.connect(analysers.main)
source.start(0, offset || 0)
Guess, you should use AudioBufferNode (it has ability to do seek) - https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start
Also, this wrapper might be usefull - https://github.com/eipark/buffaudio
Use taphold API to acheive the long press Event.
$(function(){
$( "your element" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ){
/*write your code here for seek forward */
}
});
Use JQuery Timer
var mousedowntime;
var presstime;
$("button[id$='" + buttonID + "']").mousedown(function() {
var d = new Date();
mousedowntime = d.getTime();
});
$("button[id$='" + buttonID + "']").mouseup(function() {
var d = new Date();
presstime = d.getTime() - mousedowntime;
if (presstime > 999/*You can decide the time*/) {
//Do_Action_Long_Press_Event();
}
else {
//Do_Action_Click_Event();
}
});
To Play from Beginning
function beginAudio(){
audio.trigger('pause');
audio.prop("currentTime",audio.prop("currentTime")-audio.prop("currentTime"));
audio.trigger('play');
}
or set current time to zero and then play.
For Forward and Backward use this
audio.prop("currentTime",audio.prop("currentTime")-5);// 5 secs backward
audio.prop("currentTime",audio.prop("currentTime")+5);// 5 secs forward

Copy one week event into next week full calender

From some days I am working in html full calender, my default view is week view, I want to copy one week events into next week by click in html button. I got event array by below mention code but I am not getting, how should I copy this events into next week, I have googled but didn't get any thing regarding this. Please help to resolve this Thanks in advance.
$('#btn_copy_calendar_next_week').click(function () {
$('#calendar').fullCalendar('next');
events = $('#calendar').fullCalendar('clientEvents');
console.log(events);
});
I got solution of my own problem after very long time, it works for me I hope this will help other too, whoever need it.
$('#btn_copy_calendar_next_week').click(function () {
all_events = $('#calendar').fullCalendar('clientEvents');
var current_view = $('#calendar').fullCalendar('getView');
var start_date=current_view.start;
var end_date=current_view.end;
var event_obj = new Object();
var check_current_week_event=false;
all_events.forEach(function(evnt) {
if (evnt['start'].format() >= start_date.format() && evnt['end'].format() <= end_date.format()){
--l;
check_current_week_event=true;
D1=evnt['start']._d;
console.log(D1);
D2=evnt['end']._d;
var X1=D1.format("yyyy-mm-dd'T'HH:MM:ss'Z'");
var X2=D2.format("yyyy-mm-dd'T'HH:MM:ss'Z'");
var XD1=new Date(X1);
var XD2=new Date(X2);
XD1.setUTCDate(XD1.getUTCDate() + 7);
XD2.setUTCDate(XD2.getUTCDate() + 7);
var str_d1 = convertLocalDateToUTCDate(XD1,true);
var str_d2 =convertLocalDateToUTCDate(XD2,true);
var mb_test1 = convertLocalDateToUTCDate(str_d1,true);
var mb_test2 = convertLocalDateToUTCDate(str_d2,true);
event_obj.id='vkm_test'+l;
event_obj.title=evnt['title'];
event_obj.start= mb_test1.format("yyyy-mm-dd'T'HH:MM:ss'Z'");
event_obj.end= mb_test2.format("yyyy-mm-dd'T'HH:MM:ss'Z'");
event_obj.allDay = false;
event_obj.offer_id=evnt['offer_id'];
console.log('=========================');
customData = {
'event_id':"chunked-test"+l,
'offer_id':event_obj.offer_id,
'title': event_obj.title,
'start':event_obj.start,
'end':event_obj.end,
'rest_id':{{restaurant.restaurant_id}}
};
console.log(event_obj.start);
console.log(event_obj.end);
// $('#calendar').fullCalendar( 'renderEvent',event_obj);
$("#calendar").fullCalendar( "removeEvents", "chunked-helper");
$("#calendar").fullCalendar( "addEventSource",chunk_test(event_obj,'test'+l));
offers_list.push(customData);
}
});
if(check_current_week_event==true){
$('#calendar').fullCalendar('next');}
else{
$('#hd_id').text('DealMonk');
$('#txt_error_msg').text('There is Nothing to Copy in Next Week!');
$('#error_msg').modal('show');
}
});
Happy Coding..

Moving a range with mouse w/o being perturbed by script induced movements

I have a range input in a HTML page, which actually stands for a music timeline. I got a script that moves the handle along the slider as the music progresses.
Now, I want to be able to move the handle so the music will play where I set the handle with the mouse.
The problem is that when I begin dragging the handle along the slider, as soon as its position is updated by the script, it is set to its actual position and I lose control over it.
How can I fix that so I can move my handle freely ?
To play the music I am using a plugin, soundmanager2, and I am using the provided whileplaying callback function to set the position of the slider as the music progresses.
Here is the HTML bit :
<div id="timeCtl">
<span id="timeRange">
<input id="time" type="range" value="0" min="0" max="1000"/>
</span>
<p id="timeCpt">00:00 / 00:00</p>
</div>
And the JS that goes with it :
//This is the callback function contained within an object being created
whileplaying : function() {
//This whole block processes the "position / duration" display
var dur = parseInt(this.duration/1000, 10);
var durMin = parseInt(dur/60, 10);
var durSec = dur%60;
var pos = parseInt(this.position/1000, 10);
var posMin = parseInt(pos/60, 10);
var posSec = pos%60;
if (posMin < 10)
{
posMin = "" + "0" + posMin.toString();
}
if (posSec < 10)
{
posSec = "" + "0" + posSec.toString();
}
if (durMin < 10)
{
durMin = "" + "0" + durMin.toString();
}
if (durSec < 10)
{
durSec = "" + "0" + durSec.toString();
}
var displayDur = durMin.toString() + ":" + durSec.toString();
var displayPos = posMin.toString() + ":" + posSec.toString();
g("timeCpt").innerHTML = displayPos + " / " + displayDur;
//And here is the part that take care of moving the handle
var curPos = parseInt(pos / dur * 1000, 10);
g("timeRange").innerHTML = "<input id=\"time\" type=\"range\" value=\"" + curPos.toString() + "\" min=\"0\" max=\"1000\">";
//The problem is that it moves the handle while I'm dragging it and then I lose control and have to grab it again
//How to avoid that ?
}
Thank you for your time reading this, and thank you in advance for your answers.
Actually I may have found a way to solve the problem.
I could make things so that when the onclick event is fired, the script moving the range is disabled, until the onrelease event is fired (totally not sure about the events names but I guess find out what they really are).
I'm gonna try this out and keep the thread up to date.
EDIT: This works.
Create a boolean variable.
Surround the updating part of your script with a condition controlled by the boolean variable.
Set the boolean variable to false when the slider's onmousedown event is fired, and it will prevent the script from updating it.
Set it back to true when onmouseup is fired, with some additionnal processing if needed.

Clear Var or Callback in Javascript

Sorry, i am not sure if I am asking the question correctly. When a date is changed by a user the date count down changes on the page. If the date is changed more than once it flashes all date changes. I guess it is storing the previous information somewhere. I have tried clearing the vars.
var deal_yeax = '';
as I would do in php with no luck
$('#deal_end').focusout(function() {
var deal_end = $("#deal_end").val();
var array = deal_end .split('-');
var deal_montx = array[0];
var deal_dax = array[1];
var deal_yeax = array[2];
deal_montx = deal_montx - 1;
$(function(){
ts = new Date(deal_yeax , deal_montx , deal_dax );
$(".h").countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
message_days = (days);
var message_hours = (hours);
$(".message_hours").text(message_hours + " Hours");
var message_minutes = (minutes);
$(".message_minutes").text(message_minutes + " Minutes");
var message_seconds = (seconds);
// Creat the display
if ( message_days < 1 && message_hours < 1 ) { $(".message_seconds").text(message_seconds + " Seconds"); }
else if ( message_days < 1 && message_hours > 1 ) { }
else if ( message_days == 1 ) { $(".message_days").text(message_days + " Day"); }
else { $(".message_days").text(message_days + " Days"); }
if ( message_days < 1 && message_hours < 1 && message_minutes < 1 && seconds < 1 ) {
$(".hide_my_buy_button").fadeOut("fast");
}
}
});
});
});
Everytime you "focusout" from #deal_end, you'll attach a countdown event to .h. Without knowing exactly how countdown(...) works (It'll be good if you provide the source so we can provide more help!), one way to fix the issue maybe to use JQuery's unbind(...) function to remove existing listeners on an event before adding a new one to it.
Here's an example on the issue:
<!-- HTML -->
<div>
<input id="text" />
<button id="clicker" />
</div>
<!-- Javascript -->
$('#text').focusout(function() {
var text = this.value;
// Everytime #text is "focused out", a new event is registered with #clicker.
$('#clicker').click(function() {
console.log('Value: ' + text);
});
});
... and here's how to solve the issue (It's just one of the many ways. This way is probably not the most elegant but anyhow.)
$('#text').focusout(function() {
var text = this.value;
$('#clicker').unbind('click');
// Everytime #text is "focused out", a new event is registered with #clicker.
$('#clicker').click(function() {
console.log('Value: ' + text);
});
});
Bottom line: It seems focusout(...) is adding a new countdown everytime it is triggered. That might be the problem you're having.
Not sure if this helps? Lemme know.
P.S. JSFiddle to go with it: http://jsfiddle.net/PE9eW/
The problem seems to be with .countdown function that you are using in your code to flash the date changes. When you assign a new count down object to $(".h") the plugin or the function probably assign some event handler or interval to it, but it doesn't seem to clear the old ones when it is called again and that is why it flashing all the dates for each countdown. So you will have to do it manually. I am not sure if you are using an external plugin or is it your own function but what you need to do is to clear the existing events or intervals that is assigned to your element when you call the function. I can be more helpful if you tell me which plugin you are using or maybe show the code if it is your own function. (referring to .countdown() )

Categories