I'm upgrading from FC3 to FC6.
I get my events from a database so I cannot initialize color from "eventSource" and I need to distinguish the different type base on the title.
How can I do it? In my previous code, where I use FC3 i used eventRender like this:
eventRender: function eventRender( event, element, view ) {
//add userName to event displayed
element.find('.fc-title').append("<br/>" + event.nomeUtente);
//decide color based on the event type
if(event.title == "Normal") {
element.css('background-color', '#6d4c41');
element.css('border-color', '#6d4c41');
}
else if(event.title == "Straordinarie") {
element.css('background-color', '#c0ca33');
element.css('border-color', '#c0ca33');
}
else if(event.title == "Ferie") {
element.css('background-color', '#e53935');
element.css('border-color', '#e53935');
}
else if(event.title == "Sick Day") {
element.css('background-color', '#ffa000');
element.css('border-color', '#ffa000');
}
else if(event.title == "Permesso") {
element.css('background-color', '#9fa8da');
element.css('border-color', '#9fa8da');
}
else if(event.title == "Smart Working") {
element.css('background-color', '#00acc1');
element.css('border-color', '#00acc1');
}
else if(event.title == "Trasferta") {
element.css('background-color', '#00897b');
element.css('border-color', '#00897b');
}
else if(event.title == "Assenza non retribuita") {
element.css('background-color', '#546e7a');
element.css('border-color', '#546e7a');
}
else if(event.title == "Other") {
element.css('background-color', '#5e35b1');
element.css('border-color', '#5e35b1');
}
I tried eventContent like this:
eventContent: function(event,eventInfo) {
var title = event.event.title;
if(title == "Normali") {
event.backgroundColor == '#6d4c41'
}
/* same for the other type of event, not gonna put everything because it just repeats */
And I also tried it with eventDidMount:
eventDidMount: function(args){
var title = event.event.title;
if(title == "Normali") {
args.el.css = 'backgroundColor'=='#6d4c41';
}
But nothing works! I tried to understand the documentation but I dont get how to do it.
I also need to display on my calendar, under the event name, the user who created the event.
In FC3 I used this line
element.find('.fc-title').append("<br/>" + event.nomeUtente);
in eventRender. Is it possible to do it in FC6? If yes, how?
Related
I have following JS which used to make a page fullscreen after clicking on link:
// mozfullscreenerror event handler
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
// keydown event handler
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
toggleFullScreen();
}
}, false);
Is there a way to make page scroll (overflow) be visible only in fullscreen mode, and when user cancel full screen by clicking same link again or by another way, overflow becomes hidden?
You could just use a class to represent "no overflow" or vice versa. And then just work it into your function, like so:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
document.body.className = document.body.className.replace(' no-scroll', '');
...
} else {
document.body.className += " no-scroll";
See this working example using the following method for "toggling" the class to turn scroll "on/off"
// add/remove no scroll class to body
function toggleNoScroll(off) {
// test if already exist:
var a = Array.prototype.indexOf.call(document.body.classList, 'no-scroll') + 1;
// remove if does exist, so as not to double up
document.body.className = document.body.className.replace(' no-scroll', '');
// add only if off IS False OR off is empty & it did not previously exist (thus "toggle")
if (off === false || (off !== true && !a)) document.body.className += " no-scroll";
return document.body.classList;
}
So then I have:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
toggleNoScroll(true);
...
else {
toggleNoScroll(false);
You can add a class to your body element when you run the toggleFullscreen() function like this:
document.body.className += ' ' + 'fullScreened'
then add a css rule like this:
.fullScreened {
overflow:hidden;
}
Let me know if it works :)
I am using this jQuery script to open and close multiple divs on a page.
<script type="text/javascript">
jQuery(document).ready(function(){
$("#expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
$("#expanderHead2").click(function(){
$("#expanderContent2").slideToggle();
if ($("#expanderSign2").text() == "+"){
$("#expanderSign2").html("−")
}
else {
$("#expanderSign2").text("+")
}
});
$("#expanderHead3").click(function(){
$("#expanderContent3").slideToggle();
if ($("#expanderSign3").text() == "+"){
$("#expanderSign3").html("−")
}
else {
$("#expanderSign3").text("+")
}
});
$("#expanderHead4").click(function(){
$("#expanderContent4").slideToggle();
if ($("#expanderSign4").text() == "+"){
$("#expanderSign4").html("−")
}
else {
$("#expanderSign4").text("+")
}
});
$("#expanderHead5").click(function(){
$("#expanderContent5").slideToggle();
if ($("#expanderSign5").text() == "+"){
$("#expanderSign5").html("−")
}
else {
$("#expanderSign5").text("+")
}
});
$("#expanderHead6").click(function(){
$("#expanderContent6").slideToggle();
if ($("#expanderSign6").text() == "+"){
$("#expanderSign6").html("−")
}
else {
$("#expanderSign6").text("+")
}
});
$("#expanderHead7").click(function(){
$("#expanderContent7").slideToggle();
if ($("#expanderSign7").text() == "+"){
$("#expanderSign7").html("−")
}
else {
$("#expanderSign7").text("+")
}
});
$("#expanderHead8").click(function(){
$("#expanderContent8").slideToggle();
if ($("#expanderSign8").text() == "+"){
$("#expanderSign8").html("−")
}
else {
$("#expanderSign8").text("+")
}
});
$("#openalltext").click(function(){
$(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
$("#expanderSign8, #expanderSign7").html("−")
}
else {
$("#expanderSign8, #expanderSign7").text("+")
}
});
});
</script>
Everything works fine except, I am trying to select multiple id's so I can change the "expandersign" on all the divs when clicking "expand all". I also tried using a class name so I only need one selector but it didn't work.
$("#openalltext").click(function(){
$(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
$("#expanderSign8, #expanderSign7").html("−")
}
else {
$("#expanderSign8, #expanderSign7").text("+")
}
});
How can I select multiple div id's?
This is html for my expand all link --
<h4 id="openalltext" class="dctopall" style="cursor:pointer;margin-bottom: 0 !important;">Expand All</h4>
As for the divs being toggled, each of them are as follows --
<h4 id="expanderHead" class="dctop" style="cursor:pointer;margin-bottom: 0 !important;">Title Text <span id="expanderSign" class="exSign">+</span>
</h4>
<div id="expanderContent" class="openall" style="display:none">content</div>
This is what worked for me -
$("#openalltext").click(function(){
$(".openall").slideToggle();
$("#expanderSign8, #expanderSign7, #expanderSign6, #expanderSign5, #expanderSign4, #expanderSign3, #expanderSign2, #expanderSign").each(function() {
if ($(this).text() == "+") {
$(this).text("−")
} else {
$(this).text("+")
}
});
});
Your idea is good, but you need to target each element individually in a loop :
$("#expanderSign8, #expanderSign7, ...etc").each(function() {
if ($(this).text() == "+") {
$(this).text("−")
} else {
$(this).text("+")
}
});
Your complete code can be one click if you use classes and find. Your all code can also use a class and the each to loop.
$(function(){
$(".expanderHead").on("click",function(){
$(this).find(".expanderContent").slideToggle();
var $sign = $(this).find(".expanderSign");
$sign.text() = $sign.text() == "+"?"−":"+";
});
$("#openalltext").on("click",function(){
$(".openall").slideToggle();
$(".expanderSign").each(function() {
$(this).text() = $(this).text() == "+"?"-":"+";
});
});
});
I want to make the page fullscreen automatically without the need to click anything. I've tried to change this
<body onclick="toggleFullScreen()"> into <body onload="toggleFullScreen()">. but nothing happens; it doesn't work. :(
This is the javascript..
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
You can't execute any RequestFullScreen without a user gesture in any browser.
By the way your full screen function can be like this :
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen;
rfs.call(el);
}
I want to show div whose id is deliveryto1 when if condition is true it doesn't show deliverto1 div. This div(#deliverto1) is always showing in else part.
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
}
});
You forgot to hide div in else part. Use .hide() in else part as shown below
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
$('#deliverto1').hide();
}
});
I have a small javascript that changes the title of a input-field to it's value and some other stuff:
function autoFill(id){
if(jQuery(id).val()==""){
jQuery(id).val(jQuery(id).attr("title"))
.addClass("help");
};
jQuery(id).focus(function(){
if(jQuery(this).val()==jQuery(this).attr("title")){
jQuery(this).val("").removeClass("help");
}
})
.blur(function(){
if(jQuery(this).val()==""){
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
jQuery(".trip").submit(function(){
if(jQuery(id).val() == jQuery(id).attr("title")){
jQuery(id).val('');
}
});
}
When I try to use this script on a class that is on several nodes on one page it only works on the first. For example:
autoFill(".field");
Now I have to make it like this instead:
autoFill("#driver_from");
autoFill("#driver_to");
autoFill("#driver_when");
autoFill("#passenger_from");
autoFill("#passenger_to");
autoFill("#passenger_when");
how do I make it so that it works on every field instead?
Something like this would work:
function autoFill(selector){
jQuery(selector).each(function() {
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
};
jQuery(".trip").submit(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val('');
}
});
}).focus(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val("").removeClass("help");
}
}).blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
}
The important part is the .val() check at the beginning, it's getting the .val() of the first match, you need to handle each separately.
Or, rewrite it as a plugin like this:
(function($) {
$.fn.autoFill = function() {
return this.each(function() {
$(".trip").submit(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val('');
}
});
}).focus(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val("").removeClass("help");
}
}).blur(function(){
if($(this).val() == "") {
$(this).val($(this).attr("title")).addClass("help");
}
}).blur();
};
})(jQuery);
Then you can call it like this:
$(".field").autoFill();