Change full calendar output? - javascript

I am working on a full calendar on a webpage. Currently, the layout of each day block is:
Time
Title
Description
but I would like title goes first and then time. But I cannot find anywhere I can make this change in the code.
$(document).ready(function() {
$("#cal").fullCalendar({
header: {
left: 'prev,next',
right: 'month,agendaDay'
},
aspectRatio: 2,
editable: false,
timeFormat: 'h:mmt{-h:mmt}',
eventTextColor: 'black',
eventBackgroundColor: '#FFFF77',
allDayDefault: false,
eventSources: [{
url: 'path/to/fullcalendar',
color: 'green',
textColor: 'black'
}],
eventRender: function(event, element) {
element.find('.fc-event-title').html(event.title + "<br/>" + event.description).text();
}
});
});
So anyone can help me figure out where should I modify to make the change to swap title and time?
Thank you

Inside of eventRender you need to alter the element layout so the time comes after the title. Something like this:
eventRender : function(event, element) {
var time = element.find('.fc-event-time').detach();
element.find('.fc-event-title').after(time);
... any other code here ...
}

Related

how to alert next month date

I'm using "fullcalendar" plug- https://fullcalendar.io/ in order to display tours on calendar
when user click next/pre button, how do i ALERT the next/pre full date?
for instant, if the calendar show me the current day (2019-06-03) and i click "next" then alert will display 2019-07-01. clicking "pre" will display 2019-05-01
my code:
<div id="calendar"></div>
<script>
$(document).ready(function() {
var initialLocaleCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
eventLimit: true,
editable: false,
events: [
{
title: 'tour 1',
start: '2019-05-05',
end: '2019-05-11',
className: 'bg-warning'
},{
title: 'title for tour num 2',
start: '2019-05-19',
end: '2019-05-25',
className: 'bg-purple'
},{
title: '3td tour title',
start: '2019-05-16',
end: '2019-05-21',
className: 'bg-info'
}
]
});
});
</script>
I'm not sure why you'd need to do this, since the new date will already be displayed at the top of your calendar.
However, putting that aside, one way to achieve it is to handle the viewRender event. This will occur anytime either the date range or the type of view is changed on the calendar, and fires just before the new view is actually displayed on the screen. As per the documentation, the view object supplied in the callback contains the the start and end dates which are about to be displayed.
You could write something like this:
viewRender: function( view, element )
{
alert(view.start.format("YYYY-MM-DD"));
}
Here's a working demonstration: http://jsfiddle.net/8bxqzfev/

Jquery FullCalendar not loading in popup

I created a popup with my custom css and js show hide functions. Now I want to place the calendar to that popup.
I tried
$(document).on('click', '.cliker', function () {
$(".succes_msg").remove();
$show = $(this).attr('pkid');
$(this).addClass('activer');
$("input[name=startTime]").val($(this).find("span").eq(0).html()).timepicker();
$(".addbtn").attr('pkId', $show);
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
aspectRatio: 1.5,
header : {
left : 'prev,next',
center: 'title',
right : ''
},
dayOfMonthFormat: 'ddd MMM/MM',
firstDay: 4,
eventLimit: true,
render: true,
height: 250,
buttonText: {
today: 'today',
month: 'month' },
eventSources: [{
url: '{{URL::to(route('get_calender_data'))}}',
type: 'get',
data: {cinema: 0}
}],
});
$(".modelPophldr,.editShow").show();
$(".editShow").animate({'margin-top': '25px'});
});
Like above there I am showing the popup after the fullcalendar rendering.
How to fix it?
Edit...
Right now the calendar is coming with only right and left arrows, but the calendar is not loaded. When I click on the next button it will show the calendar with events perfectly.
display: none removes the element out of the flow of the HTML so you need to call your event when your element becomes visible that why your plugin is working when you click on arrows
try to initialize your plugin after
$(".modelPophldr,.editShow").show();

I want to display event dynamically in fullcalendar 3.0.1

below is my code. i don't know why the calendar are working but no event displayed. I very appreciate your help.
var eventSTR = [{start: '2016-11-21',end: '2016-11-23',overlap: false,rendering : 'background', color: '#ff9f89'},];
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month',
},
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
event : eventSTR
});
});
You're 99% there, just missing 2 things
1) you need to set the today variable before you set the document ready function:
var today = new Date();
2) you've misspelled the events property. You have:
event : eventSTR
it should read:
events : eventSTR

jQuery qTip and FullCalendar with agendaWeek as view

I am making a website that anyone can embed our calendar using iFrame. That calendar is using FullCalendar and qTip.
I am using FullCalendar with a default view of agendaWeek, the problem with that is when I click on an event the qtip appears, but when I scroll down, the qtip popup position is like fixed. It is very difficult to explain so here's the jsfiddle
Here's my code:
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
allDayDefault: false,
allDaySlot: false,
columnFormat:{
week: 'ddd dS'
},
events:{
url:"http://<?=$rootUrl;?>/studios/fetch_event_calendar_public/",
data:{
id:"<?=$studio_id;?>",
}
},
eventRender: function(event,element,view){
... ... ... ..
jQuery(element).qtip({ // Grab some elements to apply the tooltip to
id: 'calendar',
content: {
text: html,
button: 'Close',
title: 'Event Details',
},
style: 'qtip-light',
position: {
my: 'bottom center',
at: 'top center'
},
show:{
event:'click',
},
hide:{
event: 'unfocus'
},
});
},
windowResize: function( view ) {
calendar.fullCalendar('option', 'height', $(window).height() - 40);
}
});
So what I want here is that when the fullcalendar is scrolled down or up, the qtip should not have a position of fixed, it should just stay where the event is.
Your help will be greatly appreciated! Thanks!

How to display current date using full calendar

I am new to jquery.
I am using full calendar for showing events for a month.
However I am unable to display current date above the calendar as shown in various example.
Below is my code:
$(document).ready(function () {
$('#calendar').fullCalendar({
defaultView: 'month',
editable: false,
eventSources: [
{
url: '/Admin/AjaxRequest/CalendarDate/',
type: 'POST',
data: {
start: '0',
end: '0',
id:id
},
},
]
});
});
Titleformat and Header documentations have all the answers you need.
Set a header where you specify where you want your title and then specify in titleformat how you want this title to be displayed.
Answering this even though #Xaerxess point in the comment is valid..

Categories