I need to add two calendar jQuery objects to the html page. I have the below setting for date picker. Have an icon image for opening the calendar object. For absolute positioning the icon image doing the below css ui-datepicker-trigger override. If i have two calendar objects how can i create two overrides for the class because the name of the override class naming convention doesn't to have a id name . Pasted the code in http://jsfiddle.net/y6DDh/
.ui-datepicker-trigger {
position:absolute;
left:330px;
top:300px;
}
$("#datepicker").datepicker({
//showOn: both - datepicker will come clicking the input box as well as the calendar icon
//showOn: button - datepicker will come only clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'jquery/jquery-ui-1.10.3/demos/datepicker/images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
$("#datepicker2").datepicker({
//showOn: both - datepicker will come clicking the input box as well as the calendar icon
//showOn: button - datepicker will come only clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'jquery/jquery-ui-1.10.3/demos/datepicker/images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
dateFormat: 'dd-mm-yy'
});
For the first one:
#datepicker + .ui-datepicker-trigger {
position: absolute;
left:330px;
top:300px;
}
For the second:
#datepicker2 + .ui-datepicker-trigger {
position:absolute;
left:530px;
top:300px;
}
Example: http://jsfiddle.net/y6DDh/1/
Related
I'm currently trying to make a Year calendar only.
I've disabled the navigation between days and months and removed the header (with the buttons).
BUT, on the year display, months are links. When you click on it, that changes the type of the calendar display (year display => month display).
In my case, because I disabled the header, if someone clicks on that month link they can't go back to the year view...so the calendar becomes unusable.
Does someone know how to disable that "month link"?
$('#calendarRoomUnavailable').fullCalendar({
height: 'auto',
header: {
left : '',
center: 'title',
right: ''
},
defaultView: 'year',
defaultDate: currentDayStart,
lang: 'fr',
firstDay: 1,
columnFormat: 'ddd D/M',
weekends: false,
navLinks : false,
events: basePath + '/agenda/datalist/room_available',
viewRender: function (view, element) {
$(element).find('tbody td').css('cursor', 'pointer');
currentDayStart = view['start'];
currentViewType = view['type'];
},
dayClick: function (date, jsEvent, view) {
[...]
},
eventClick: function (calEvent, jsEvent, view) {
[...]
},
});
Code behind the month link.
<div class="fc-year-monthly-name fc-first">
<a name="201801" data-year="2018" data-month="0" href="#">Janvier</a>
</div>
Thanks
Exemple with the 'month link'
Is it possible to disable specific event (Not whole calendar events) re-size.
For example, I have one demo external event drag to the calendar, I have put two different menu for drag event one is red colored and another is with green color. I have applied following flags for some of the specific features like.
eventOverlap: false,
editable: true,
disableResizing: true,
eventDurationEditable: false
Now what I need to do is, Is it possible to enable to re-size to a green colored event ?
For events you wish to be resized, you can do so by adding property durationEditable = true to the event object:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
eventOverlap: false,
editable: true,
disableResizing: true,
eventDurationEditable: false,
events: [{
title: 'Resize me',
start: moment(),
end: moment().add(75, 'minute'),
durationEditable: true /* This event can be resized! */
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js"></script>
<div id='calendar'></div>
I'm using Fullcalendar with a Google Calendar so I can't apply a class to an event as far as I'm aware.
What I want to do should be quite simple and I'm sure the answer will involve eventRender but I just can't get it working.
Simply: change the entire background color of the cell that contains any event (all events are "all day" within the Google Calendar).
What I'm trying to achieve is an "availability" state; any event is "unavailable" i.e. background color red.
Yes, you can do it with eventRender. You'll have to find the td that contains that event. If you inspect the fullCalendar, you'll note the tds have a data-date attribute for that particular day. That is how we will find the td that has an event in it so we can change the background color to red, specifically using:
eventRender: function (event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
$("td[data-date='"+dataToFind+"']").addClass('activeDay');
}
In this example, the first line in eventRender uses moment to format the event start date into the format needed to match the data-date attribute value. The second line finds a td with the data-date attribute having a value of dataToFind and then adds a class we make up called activeDay, assuming you add something like this to your head/stylesheet:
<style>
.activeDay {background-color:#ff0000 !important;}
</style>
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event 1',
start: new Date(),
end: new Date(),
allDay: false
}, {
title: 'Main Event 2',
start: '2014-10-03 19:00',
end: '2014-10-03 19:30',
allDay: false
}, {
title: 'Main Event 3',
start: '2014-10-15 17:00',
end: '2014-10-15 18:00',
allDay: false
}, {
title: 'Main Event 4',
start: '2014-11-30 7:00',
end: '2014-11-30 18:00',
allDay: false
}, ],
header: {
left: '',
center: 'prev title next',
right: ''
},
eventRender: function(event, element) {
var dataToFind = moment(event.start).format('YYYY-MM-DD');
$("td[data-date='" + dataToFind + "']").addClass('activeDay');
}
});
.activeDay {
background-color: #ff0000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<p>Example:</p>
<div id="fullCal"></div>
The answer of #MikeSmithDev does not work if you have events on multiple days.
If you have multiple days use this javascript:
eventRender: function (event, element) {
var start = moment(event.start);
var end = moment(event.end);
while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){
var dataToFind = start.format('YYYY-MM-DD');
$("td[data-date='"+dataToFind+"']").addClass('dayWithEvent');
start.add(1, 'd');
}
}
It uses the same principle as MikeSmithDev's, so you must use the same css.
I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")
I'm developing an app with asp.net and jQuery and I have a strange problem, I have the div(used as dialog) and a button to show the dialog, the first time I call the dialog, it shows correctly, I close it but when I try to show for the second time the background grays but the dialog doesn't show (only in IE in firefox it works fine). Is there a way to fix this? Or maybe I'm doing somethign wrong.
<div id="divAuto">
....
</div>
<button id="openAuto">SHOW</button>
And here's the js:
$(document).ready(function() {
var dlg = $('#divAuto').dialog({ autoOpen: false, modal: true, show: "fold", hide: "drop", width: "500", height: "370" });
dlg.parent().appendTo(jQuery("form:first"));
$('#openAuto').click(function() {
$("#divAuto").dialog("open");
return false;
});
});
I'm using "appenTo" because I'm using asp.net buttons in the dialog and it's the "fix" to get the buttons to work.
Thanks in advance for any help.
Ariel
Try initiating the dialog in the click event instead.
$("#divAuto").parent().appendTo($("form:first"));
$("#openAuto").click(function() {
$("#divAuto").dialog({
width: "500",
height: "370",
modal: true,
close: function(event, ui) {
$(this).dialog("destroy");
}
});
});