We Keep Coding

keep the new background color of current day in fullcalendar when click on next month or previous month

I am working on a react project using npm fullcalendar. there is a requirement that I need to change the color of the current day. I managed to do that using the following :
$('.fc-today').attr('style','background-color:#40cc25');
however, the problem is that when I click on next month or previous month it change the color to the original color of the library. how can I keep my new background color?
here is my code :
var EventCalendar = React.createClass({
mixins: [History],
getInitialState: function () {
return {
isModalOpen: false
};
},
_onCalendarSelect: function (start, end, jsEvent, view) {
if (!AuthStore.isAdministrator())
return;
var event = {
start: start,
end: end
};
this.setState({
event: event,
isUpdate: false
});
this.props.onNewEvent(event);
},
_onEventSelect: function (event) {
this.props.onEventSelect(event)
},
_loadEvents: function(start, end, timezone, callback) {
var events = EventStore.getInRange(start, end, this.props.environmentId);
if (!EventStore.isLoaded(start.format("YYYY-MM"))) {
EventActions.fetchData(start, end, this.props.environmentId)
} else {
callback(events);
}
},
_onEventStoreUpdate: function() {
// This is fix for IE11 required by bug RTC #458121
var moment = this.$fullCalendarContainer.fullCalendar('getDate');
this.$fullCalendarContainer.fullCalendar('destroy');
this.$fullCalendarContainer.fullCalendar({
defaultView: 'month',
defaultDate : moment,
selectable: true,
eventLimit: true,
eventClick: this._onEventSelect,
select: this._onCalendarSelect,
events: this._loadEvents,
displayEventEnd: false,
displayEventTitle: true,
nextDayThreshold: false
});
$('.fc-today').attr('style','background-color:#40cc25');
// For other browsers we can just use : this.$fullCalendarContainer.fullCalendar('refetchEvents');
},
componentWillMount: function () {
EventActions.invalidateData();
},
componentDidMount: function () {
this.$fullCalendarContainer = $(this.getDOMNode());
this.$fullCalendarContainer.fullCalendar({
defaultView: 'month',
selectable: true,
eventLimit: true,
eventClick: this._onEventSelect,
select: this._onCalendarSelect,
events: this._loadEvents,
displayEventEnd: false,
displayEventTitle: true,
nextDayThreshold: false
});
EventStore.addChangeListener(this._onEventStoreUpdate);
},
componentWillUnmount: function () {
this.$fullCalendarContainer.fullCalendar('destroy');
EventStore.removeChangeListener(this._onEventStoreUpdate);
EventActions.invalidateData();
},
render: function () {
return <div/>
}
});
module.exports = EventCalendar;
and this how I am calling the componenet:
<EventCalendar onEventSelect={this._onEventSelect} onNewEvent={this._onNewEvent} environmentId={this.props.params.id}/>

Try using the eventAfterAllRender callback. When events are done rendering then it will style the element. The only downside is there may be a slight delay before it is styled but it seems to be just a few milliseconds. Here is a JSFiddle.
eventAfterAllRender: function(view) {
$('.fc-today').attr('style','background-color:#40cc25');
}

How do I combine my backbonejs view with jquery

Backbonejs.org says
"— while very deliberately avoiding painting you into a corner by making any decisions that you're better equipped to make yourself."
So I have a BackBone view like this:
var LotsaToys= Backbone.View.extend({
el: '#CaveToy',
events: {
'click .slide': 'slideAnimal'
},
initialize: function (obj) {
this.collection = new Yoyo(obj);
this.render();
},
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
},
renderBook: function (item) {
var ToyView = new oneToy({
model: item
});
this.$el.append(ToyView .render().el);
}
});
And simple Jquery code like this:
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
Do I combine these to by simply adding the JQuery code in the slide function?
(Simple Jquery image slider)
slideAnimal: function (event) {
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
});
Im a noob, so please give me a explanation ,not sure what way is 'good practice' or what way would be better to implement..

You need place it after render
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
this.slideAnimal();
},
slideAnimal: function() {
this.$("#slider").sudoSlider({
vertical: true,
continuous: false
});
}

jquery masterpage custom function

Jquery custom function on masterpage not working
I have a custom function like as follows :
(function ($) {
$.fn.scrollingCarousel = function (options, i) {
...something something
};
jQuery.fn.scrollingCarousel.defaults = {
autoScroll: false,
autoScrollDirection: 'left',
autoScrollSpeed: 10000,
looped: false,
scrollerAlignment: 'horizontal',
scrollerOffset: 0,
scrollSpeed: 'fast',
beforeCreateFunction: null,
afterCreateFunction: null
};
})(jQuery);
i am using it in a page which has a masterpage.
i am using it in a page as follows.
<script type="text/javascript">
$(document).ready(function () {
$(this).('#carousel-demo1').scrollingCarousel();
});
</script>
i get an error as scrollingCarousel is not recognized.
If i dont use the masterpage the code works fine.

As mentioned , the way you are calling your function is not correct
example usage:
$(document).ready(function(){
var a = $("#carousel-demo1").scrollingCarousel();
});
(function ($) {
$.fn.scrollingCarousel = function (options, i) {
alert('something')
};
jQuery.fn.scrollingCarousel.defaults = {
autoScroll: false,
autoScrollDirection: 'left',
autoScrollSpeed: 10000,
looped: false,
scrollerAlignment: 'horizontal',
scrollerOffset: 0,
scrollSpeed: 'fast',
beforeCreateFunction: null,
afterCreateFunction: null
};
})(jQuery);

By default how to set "zoom in" to image instead of "fit to screen" in iviewer?

DEMO
I have following code in iviewer. here i want to show the image to be filled in whole grey box.
HTML:
<div id="viewer" class="viewer"></div>
JS:
var $ = jQuery;
$(document).ready(function () {
var iv1 = $("#viewer").iviewer({
src: "http://test.dpetroff.ru/jquery.iviewer/test/test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function (ev, coords) {},
onStartDrag: function (ev, coords) {
return false;
}, //this image will not be dragged
onDrag: function (ev, coords) {}
});
$("#in").click(function () {
iv1.iviewer('zoom_by', 1);
});
$("#out").click(function () {
iv1.iviewer('zoom_by', -1);
});
$("#fit").click(function () {
iv1.iviewer('fit');
});
$("#orig").click(function () {
iv1.iviewer('set_zoom', 100);
});
$("#update").click(function () {
iv1.iviewer('update_container_info');
});
});
Does anyone have idea for how to do that?

Add this callback to your iviewer initialization:
onFinishLoad: function () {
iv1.iviewer('zoom_by', 1);
}
Fiddle updated here.

Allow calling function to override default options - jQuery UI dialog

I want the callingFunction to be able to override the default options provided in the showDivPopUp function.
function calling(){
showDivPopUp("title of pop up box", "message to show",
{
buttons:{
Yes: function () {
$(this).dialog("destroy");
},
No :function () {
$(this).dialog("destroy");
}
}
});
}
function showDivPopUp(title,msg,options){
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title : titl,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
}
So, the above code should show two buttons viz. Yes and No instead of just OK. I don't want to do if check for each option.
UPDATE:
In options parameter there might be options for which default is not applied. So the calling function may specify size option which is not mentioned in the showDivPopUp function.

You want to use the JQuery extend() method to merge the options you pass into the function with the defaults that are specified within it.
See:
http://www.zachstronaut.com/posts/2009/05/14/javascript-default-options-pattern.html
and
http://api.jquery.com/jQuery.extend/
//calling function source excluded, use exactly the same.
function showDivPopUp(title, msg, options) {
//create basic default options
var defaults = {
modal: true,
buttons: {
Ok: function() {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title: title,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
}
//merge the specified options with the defaults.
//in example case, will have the above except with the new buttons specified
if (typeof options == 'object') {
options = $.extend(defaults, options);
} else {
options = defaults;
}
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog(options);
}

Looks like 'options' is in JSON format. Try omitting the first {buttons: portion in the 3rd argument to showDivPopUp or set buttons: options.buttons in the showDivPopUp function.
To expand on this, create more json pairs, and test for their existence in the showDivPopUp function. Exists? Override. Doesn't exist? Keep defaults.
{buttons:{
Yes: function () {
$(this).dialog("destroy");
},
No :function () {
$(this).dialog("destroy");
}
},
background:"blue",
fontsize:15
}
Access each via:
options.buttons
options.background
options.fontsize
Test for existence using:
if ( typeof( window[ 'option.fontsize' ] ) != "undefined" ) {override code}
Response to the update in the question:
Use jquery.each to iterate over all elements in the passed option.

In your mgDiv.dialog function, modify the buttons key to have a conditional value. E.g.:
function showDivPopUp(title,msg,options){
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog({
modal: true,
buttons: options.buttons || {
Ok: function () {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title : titl,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
}