I'm trying to add a border to the highlighted event (when a user clicks in a cell) like such:
.fc-highlight
{
background-color: #ccc !important;
border-color: #000 !important;
}
But as you can see in this JSFiddle, it only applies the border to some edges. How do I apply a border to the whole cell?
it's due to border collapsing. Use outline instead:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid'],
defaultView: 'dayGridMonth',
allDaySlot: false,
timeFormat: 'H:mm',
disableResizing: true,
displayEventTime: false,
displayEventEnd: false,
slotDuration: '01:00',
minTime: '00:00',
maxTime: '23:00',
selectable: true,
firstDay: 1,
});
calendar.render();
.fc-highlight {
background-color: #ccc !important;
outline:1px solid #000;
outline-offset:-1px;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
<div id="calendar">
</div>
Or box-shadow:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid'],
defaultView: 'dayGridMonth',
allDaySlot: false,
timeFormat: 'H:mm',
disableResizing: true,
displayEventTime: false,
displayEventEnd: false,
slotDuration: '01:00',
minTime: '00:00',
maxTime: '23:00',
selectable: true,
firstDay: 1,
});
calendar.render();
.fc-highlight {
background-color: #ccc !important;
box-shadow:0 0 0 1px #000 inset;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
<div id="calendar">
</div>
Related
I have a "List" view of events coming directly from Google Calendar. The Google Calendar is set to the 'America/Central' Time zone. I need to display the events in 'America/Eastern' Time Zone.
I have found examples, but can't seem to get them to work. I am providing my base code in hopes that someone can help me out.
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'list',
defaultDate: '2019-01-20',
duration: {
days: 180
},
header: {
left: '',
center: 'title',
right: ''
},
displayEventTime: true, // don't show the time column in list view
height: 450,
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'REALKEY',
// US Holidays
events: 'REALCALENDAR',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
<style>
#loading {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
Currently my events are being displayed in just UTC.
I got this figured out.
I had to add both timezone and timezoneParam to get the calendar to adjust the time to the right timezone. Here is my final code with the keys removed.
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'list',
defaultDate: '2019-04-01',
timezone: 'America/New_York',
timezoneParam : "America/New_York",
duration: {
days: 7
},
header: {
left: '',
center: '',
right: ''
},
displayEventTime: true, // don't show the time column in list view
height: 450,
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'YOUR_KEY',
// US Holidays
events: 'YOUR_CALENDAR#group.calendar.google.com',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
this is my code, the calendar and events display correctly but i want to give them more color and a location, can somebody please help?
<!DOCTYPE html> <html> <head> <meta charset='utf-8' />
<link href='fullcalendar-3.8.0/fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar-3.8.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='fullcalendar-3.8.0/lib/moment.min.js'></script>
<script src='fullcalendar-3.8.0/lib/jquery.min.js'></script>
<script src='fullcalendar-3.8.0/fullcalendar.min.js'></script>
<script src='fullcalendar-3.8.0/gcal.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
displayEventTime: true, // don't show the time column in list view
editable: true, defaultView: 'agendaWeek',
googleCalendarApiKey: 'private',
// Key van de google calender
events: { url:'private' },
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#loading {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
#calendar {
max-width: 900px;
margin: 0 auto; }
</style>
</head>
<body>
<div id='loading'>loading...</div>
<div id='calendar'></div>
</body>
</html>
I have tried different settings, but nothing seems to work, I need to repeat events on calendar, like all Sundays, Tuesdays. Here is my code:
$('#appointment_calendar').fullCalendar({
header: {
left: 'prev',
center: 'today',
right: 'next'
},
events: [{
title:"My repeating event",
start: '10:00',
end: '14:00',
dow: [ 1, 4 ]
}],
});
Have tried removing/adding tittle, start, end, ranges, nothing seems to works.
In version 4 and above you have to use "daysOfWeek" instead of "dow".
Also you should use "startTime" and "endTime" instead of "start" and "end".
So your code should be change to :
$('#appointment_calendar').fullCalendar({
header: {
left: 'prev',
center: 'today',
right: 'next'
},
events: [{
title:"My repeating event",
startTime: '10:00',
endTime: '14:00',
daysOfWeek: [ 1, 4 ]
}],
});
I have done some testing and it appears that FullCalendar fails with dow above version 3.4.0.
The following code is identical but for the FullCalendar version.
FullCalendar 3.4.0 (OK)
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
</head>
<body>
<main>
<div class="inner">
<div class="full">
<h1>Events Calendar</h1>
<div id="calendar">
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
timezone: 'local',
firstDay: 1,
timeFormat: 'H:mm',
events: [{
title: 'All Day Event',
start: "2018-04-25T09:00:00",
dow: [3,4,5]
}]
});
});
</script>
</div>
</div>
</main>
</body>
</html>
FullCalendar 3.5.0 (FAIL)
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js'></script>
</head>
<body>
<main>
<h1>Events Calendar</h1>
<div id="calendar">
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
timezone: 'local',
firstDay: 1,
timeFormat: 'H:mm',
events: [{
title: 'All Day Event',
start: "2018-04-04T09:00:00",
dow: [3,4,5]
}]
});
});
</script>
</main>
</body>
</html>
jsFiddle with FullCalendar v3.4 (working)
jsFiddle with FullCalendar v3.5 (failing)
Can you please help me to implement Skobbler map in ionic based app ?
thanks
by using following code i can draw map.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="js/skobbler-2.0.js"></script>
<style>
#map {
height: 500px;
}
</style>
<div id="map"></div>
<script>
function initMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos.lat + "/" +pos.lng);
// alert(pos.lat + "/" +pos.lng);
mytest(pos.lat,pos.lng);
});
}
window.setInterval(function(){
initMap()
}, 1000);
var mymap = '';
var marker = '';
function mytest(lat,long)
{
if(mymap == '' || marker == '')
{
mymap = L.skobbler.map('map', {
apiKey: 'API_KEY',
mapStyle: 'day',
bicycleLanes: true,
onewayArrows: true,
pois: 'all',
primaryLanguage: 'en',
fallbackLanguage: 'en',
mapLabels: 'localNaming',
retinaDisplay: 'auto',
zoomControl: true,
zoomControlPosition: 'top-left',
center: [lat,long],
zoom: 18,
});
marker = L.marker([lat,long]).addTo(mymap);
}
else
{
mymap.center = [lat,long];
marker.remove(marker);
marker = L.marker([lat,long]).addTo(mymap);
}
}
</script>
</head>
<body>
</body>
</html>
I test a new drawing library and has led me to question how to get from drawing manager polyline position and set another markers? As in this example: polyline-complex.
My example:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(52.000, 16.000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: false,
polylineOptions: {
editable: true
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>