I am new to javascript and web developing.
So, I used the fullcalendar library (https://fullcalendar.io/) to make a calendar view, and I wonder if I am able to customize it myself.
This is my Markup code:
<div id="blueBackground">
<div class="container">
<div id='calendar'></div>
</div>
</div>
So, the "blueBackground" is for changing the entire webpage background to blue colour. The "container" class if for resizing the fullcalendar to a more appropiate view.
This is the Javascript code:
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
The javascript code is straight from the fullcalendar Usage page.(https://fullcalendar.io/docs/usage/)
So, how do I customize it? I am a complete newbie at javascript. I look around on the other questions similar to this but it bears no fruits. I can't make it work.
Thank you in advance.
I am currently also using fullcalendar and here is some of the customization i have made:
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
//Changing the header like this:
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//Lets us edit in the calendar
editable: true,
//When u select some space in the calendar do the following:
select: function(start, end, allDay){
//do something when space selected
},
//When u click on an event in the calendar do the following:
eventClick: function(event, element) {
//do something when event clicked
},
//When u drop an event in the calendar do the following:
eventDrop: function(event, delta, revertFunc) {
//do something when event is dropped at a new location
},
//When u resize an event in the calendar do the following:
eventResize: function(event, delta, revertFunc) {
//do something when event is resized
},
//Add some test events.
events: [
{
title : 'event1',
start : '2016-09-15'
},
{
title : 'event2',
start : '2016-09-15',
end : '2016-09-16'
},
{
title : 'event3',
start : '2016-09-15T12:30:00',
allDay : false // will make the time show
}
]
})
});
In my project I also use PHP and MySQL to store and change the events. Other than that almost all the customization's you can do are listed in the docs.
EDIT #1
How to change the basic color settings etc:
Changing the whole background color:
<div id="calendar" style="background:#de1f1f;"></div>
Changing the event background color (when you drag a new event the background is not blue anymore but red):
$(document).ready(function() {
$('#calendar').fullCalendar({
eventBackgroundColor: "#de1f1f"
});
});
Changing the event color (not blue anymore but red):
$('#calendar').fullCalendar({
events: [
// my event data
],
eventColor: "#de1f1f"
});
Changing the border color for the events:
$('#calendar').fullCalendar({
eventBorderColor: "#de1f1f"
});
Hope that clarified just some of the customization you can do :)
Related
I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.
Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.
I'm using FullCalendar 3.2.0. When I go to the agendaDay view and click on a time slot, a new event is created automatically with a 30-minute duration by default. How can I have access to this event from the dayClick callback, so I can change its duration?
I'm implementing a page where you have a form that defines the duration of the event. You put the number of hours the event is going to last in an input and then you click on the agendaView of the calendar to create the event. In the dayClick callback, I get the start of the event and add to it the duration that was put in the input, then I render the event in the calendar. The result is that I get my rendered event overlapped by the automatically created one, like this:
I have to click outside the calendar to make the event disappear. I would like to prevent the automatic creation of the event in the first place or be able to change its duration when it is created and make it permanent, so it doesn't disappear when I click outside of the main calendar frame.
Here's my code:
$('#calendario').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: new Date(),
navLinks: true,
selectable: true,
selectHelper: true,
dayClick: function(day, evto, view) {
var txtDuration = $('#duration');
var hoursOrDays = $('#hoursOrDays');
if (view.name === "agendaDay") {
// Here, is it possible to get a reference to the automatically created event and change its end date,
// instead of creating a new one and rendering it?
createEvent('Available', day, calculateEndDate(day, parseInt(txtDuration.val()), hoursOrDays));
}
},
editable: true,
eventLimit: true
});
function createEvent(text, start, end) {
var calendario = $('#calendario');
var evento = {
title: text,
start: start,
end: end,
durationEditable: false,
resourceEditable: false
};
calendario.fullCalendar('renderEvent', evento);
}
function calculateEndDate(start, duration, hoursOrDays) {
var unit = hoursOrDays === 'D' ? 'days' : 'hours';
return start.clone().add(duration, unit);
}
Thanks for your help!
This is my first post, I can fill in further details if needed.
I am looking to get the xy position of the cursor when either Hour, Minute or Seconds are clicked. I am looking to use the positions for the stepper to act accordingly. The current code just responds with undefined. I am getting undefined because I am using extjs 4.2.2
{
xtype: 'spinnerfield',
itemId: 'time',
name: 'intime',
width: 125,
listeners: {
mousemove: {
element: 'el',
fn: function(e){
var event = e.event;
console.log(event.clientX);
}
}
},
step:1,
value:"11:11:21",
You can add a mousemove event listener to the el (or inputEl), for example:
xtype: 'textfield',
listeners: {
mousemove: {
element: 'el',
fn: function(e){
console.log(e.event);
}
}
}
A working example: https://fiddle.sencha.com/#fiddle/uke
Stack Overflow is amazing! I been banging my head for two days trying to figure this out. I Got it thanks to #CD.. I could use mousedown: to determine where in the box is clicked and use event.clientX to capture the X position. In extjs 4.2.2 you can use e.getX()
I experience an issue with animating the change of a particular view. I have two views which use among other properties the same 'options' parameter.
The DrawVisualizationView actually draws a chart with the options, that are obtained from inputs from the OptionsView.
The .hbs file:
<!-- Options Part --!>
<div>
{{view App.OptionsView options=controller.options}}
</div>
<!-- Visualization Part --!>
<div id="visualization">
{{view App.DrawVisualizationView options=controller.options}}
</div>
I use ember-animate to produce some animations between routes and I would like to produce an animation when I change the options and the chart is redrawn. For example, the old one would fade out and the new new would fade in.
Both views use VisualizationController and VisualizationRoute, so I don't have any transitions between routes and controllers.
Here is DrawVisualizationView
App.DrawVisualizationView = Ember.View.extend({
willAnimateIn: function() { //ember-animate method
//preparation
},
animateIn: function(done) {
//some animation
},
animateOut: function(done) {
//some animation
},
drawVisualization: function(){
//draw a chart
}.observes('options.#each').on('didInsertElement')
});
The VisualizationController is set up in a way, that every change in options in OptionsView triggers redrawing of a chart through DrawVisualizationView.
willAnimateIn, animateIn and animateOut work only once during the loading of a page.
I tried events like didInsertElement and adding eventManager but none of them are triggered when the DrawVisualizationView is invoked after options changes.
Is there a way to trigger animate actions of the DrawVisualizationView if a particular option is changed?
Author of ember-animate. If you want your view to re-animate when options changes, do this:
App.DrawVisualizationView = Ember.View.extend({
willAnimateIn: function() { //ember-animate method
//preparation
},
animateIn: function(done) {
//some animation
},
animateOut: function(done) {
//some animation
},
drawVisualization: function () {
this.animateOut(function () {
this.willAnimateIn();
this.animateIn();
}.bind(this));
}.observes('options.#each')
});
I'm developing a calendar and I would like to open a qTip2 tooltip when an user clicks on a calendar cell.
I'm trying to develop my jQuery code following the OOP principles, according to the suggestions given by Raynos. So I tried with a very basic example, just putting my code in the constructor and calling it in the HTML of the cell.
Here you are the HTML code
<td onclick="new CalendarEvent('2012-10-22')" id="2012-10-22">
and the Javascript one
var CalendarEvent = function (date)
{
this.date = date;
$('#'+this.date).qtip({
content:
{
text: 'Lorem ipsum',
title: {
text: 'Lorem ipsum',
button: true
}
},
position: {
my: 'left center',
at: 'center'
},
show: {
solo : true
},
hide: 'click',
style: {
tip: true,
classes: 'ui-tooltip-light'
}
});
}
Many problems:
when I click on a cell, nothing happens but the tooltip appears when I move the cursor out of the cell and then I hover on the cell again;
the close button doesn't work;
clicking on a second cell, the first tooltip is closed and a new one is opened but when I hover on the first cell the old tooltip appears again.
Obviously when a use the same code in procedural way, everything is ok...
Thank you