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)
Related
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>
i created a new MVC asp.Net webpage and for testing i added Fullcalendar 5.1.
For testing i put all the stuff in index.html:
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="~/lib/fullcalendar/main.css" />
<script src="~/lib/fullcalendar/main.js"></script>
<meta charset='utf-8' />
<style>
.fc-sun {
background-color: blue;
}
.fc-sat {
background-color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2020-07-01'
},
{
title: 'Long Event',
start: '2020-07-07',
end: '2020-07-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-07-16T16:00:00'
},
{
title: 'Conference',
start: '2020-07-11',
end: '2020-07-13'
},
{
title: 'Meeting',
start: '2020-07-12T10:30:00',
end: '2020-07-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-07-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-07-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-07-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-07-28'
}
]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
But the backcolor wont change :-(
if i put some other variables in like this:
.fc .fc-col-header-cell-cushion { /* needs to be same precedence */
padding-top: 10px; /* an override! */
padding-bottom: 21px; /* an override! */
}
the header padding changes.
What iam doing wrong?
the fiddle is the example: http://jsfiddle.net/rajesh13yadav/nf9whojL/1/
Can you please help me?
EDIT:
As a workaround i use this:
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-07-07',
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '00:00', // a start time (09am in this example)
end: '00:00', // an end time (6pm in this example)
},
and the style is:
<style>
.fc .fc-non-business {
color: red;
background: green;
opacity: 0.1;
}
</style>
But why i cant set the other properties?
In version 5.1 the classes are .fc-day-sat and fc-day-sun
Setting the background-color for those classes works fine.
I want to make an editor of files. By the following code (JSBin), we list all the file names on the left hand, and their body on the right hand. I use ui-codemirror to style the body of the files.
However, when we click on the file names and switch from one to another, from time to time, we could see the quick flick from a textarea to a codemirror frame, which is not a good experience for an editor.
Does anyone have a solution to avoid the flick? Addtionally, is it a good direction to make an editor by angularJS and ui-codemirror?
<html ng-app="flapperNews">
<head>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('file', {
template: '<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
controller: 'FileCtrl',
params: { name: null }
})
}]);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
}]);
app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name });
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ui-sref="file({name: file.name})">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Every time you click on the link, it is creating new editor, which is an expense operation.
The best approach is to create one editor and load the content on every click.
so I removed the ui-router linking (ui-sref) and related controllers
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
// for every click event it will load the content
$scope.go=function(file){
$scope.file=file;
}
}]);
and the body
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ng-click="go(file)">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>
</div>
</div>
</body>
Example : JSBin
you could avoid the flick by adding hide class to textarea like the following code ( jsbin )
template: '<textarea class="hide" ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
I added a calendar to my site using fullcalendar the calendar display but i cant see the Previous/Next navigation buttons, and a buttons to switch the Calendar view between month and agendaWeek
my code:
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2014-09-12T10:30:00',
end: '2014-09-12T12:30:00'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
In my case I remove this
<link type="text/css" href="fullcalendar.print.css" rel="stylesheet" />
from header section and I can see the navigation buttons.
Make sure you are using the latest version of Fullcalendar which is 2.1.1. You can download that here. You should include the following files in your <head> section:
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js'></script>
Refer to this JsFiddle to see it working.
I'm new to this as you can see. I have a simple code but for some reason the dialog box never goes to the center of the screen and does not work on Safari. This is the complete code. It only start a message when any key is pressed. Can anybody help me please.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="B:/wamp/www/jquery/js/jquery-1.8.2.js"></script>
<link rel="stylesheet" href="B:/wamp/www/jquery/development-bundle/themes/base/jquery.ui.all.css">
<script src="B:/wamp/www/jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="B:B:/wamp/www/jquery/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="B:B:/wamp/www/jquery/development-bundle/ui/jquery.ui.position.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="B:/wamp/www/jquery/development-bundle/demos/demos.css">
<script >
$(document).ready(function()
{
$("#text1").keyup(function()
{
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
});
});
</script>
<body>
<div id="dialog-message"></div>
<input type="text" id="text1"/>
</body>
</html>
You have jquery.ui.position.js, so...
$( "#dialog-message" ).dialog({
modal: true,
position: 'center',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
...should work