"Calendar Design"
Bootstrap 3.3.0 Snippet by Deepakbisht

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* className colors
className: default(transparent), important(red), chill(pink), success(green), info(blue)
*/
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
* FullCalendar v1.6.4 Stylesheet
* Docs & License: http://arshaw.com/fullcalendar/
* (c) 2013 Adam Shaw
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
td.fc-day {
background:#FFF !important;
font-family: 'Roboto', sans-serif;
}
td.fc-today {
background:#FFF !important;
position: relative;
}
.fc-first th{
font-family: 'Roboto', sans-serif;
background:#9675ce !important;
color:#FFF;
font-size:14px !important;
font-weight:500 !important;
}
.fc-event-inner {
font-family: 'Roboto', sans-serif;
background: #03a9f3!important;
color: #FFF!important;
font-size: 12px!important;
font-weight: 500!important;
padding: 5px 0px!important;
}
.fc {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
* FullCalendar v1.6.4
* Docs & License: http://arshaw.com/fullcalendar/
* (c) 2013 Adam Shaw
*/
/*
* Use fullcalendar.css for basic styling.
* For event drag & drop, requires jQuery UI draggable.
* For event resizing, requires jQuery UI resizable.
*/
(function($, undefined) {
;;
var defaults = {
// display
defaultView: 'month',
aspectRatio: 1.35,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
weekends: true,
weekNumbers: false,
weekNumberCalculation: 'iso',
weekNumberTitle: 'W',
// editing
//editable: false,
//disableDragging: false,
//disableResizing: false,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

How do i make this such that only admin can add event that will be displayed on the user interface?

Ochepo Jeremiah () - 7 years ago - Reply 0


I AM LOOKING FOR SAME

kbkiranbhagat (-18) - 5 years ago - Reply 0


I copy the above code and try on my local system but its not working also here sometimes only image shown .not calender

kbkiranbhagat (-18) - 5 years ago - Reply -18


$(...).fullCalendar is not a function

adn it s not opening from downlaod need fix

wadvahag () - 10 months ago - Reply 0


$(...).fullCalendar is not a function

adn it s not opening from downlaod need fix

wadvahag () - 10 months ago - Reply 0


Awesome Code... Thanks for sharing....

izmadts () - 2 years ago - Reply 0


nicee

bootstraomjfh () - 3 years ago - Reply 0


niceeeeeeeeeeeeeee

bootstraomjfh () - 3 years ago - Reply 0


Very nice design,

I want to add a new type of event with an other background color, how can I do it ? thanks for your help

memel68 () - 4 years ago - Reply 0


in function slotSegHtml(event, seg) , edit html div class fc-event-inner like this :

"<div" +

" class='fc-event-inner'" +

" style=" +

"'" +

"background-color: " + event.backgroundColor + ";" +

"'" +

">" +

datdev () - 3 years ago - Reply 0


in function slotSegHtml(event, seg) , edit html div class fc-event-inner like this :

"<div" +

" class='fc-event-inner'" +

" style=" +

"'" +

"background-color: " + event.backgroundColor + ";" +

"'" +

">" +

datdev () - 3 years ago - Reply 0


Very nice design,

I want to add a new type of event with an other background color, how can I do it ? thanks for your help

memel68 () - 4 years ago - Reply 0


Very nice design,

I want to add a new type of event with an other background color, how can I do it ? thanks for your help

memel68 () - 4 years ago - Reply 0


Very nice design,

I want to add a new type of event with an other background color, how can I do it ? thanks for your help

memel68 () - 4 years ago - Reply 0


Nice

khunnunthawat () - 4 years ago - Reply 0


Very Nice Design!

Is there documentation on how to use it for dynamic data (i.e. events)? Thanks

ahmadihsan () - 4 years ago - Reply 0


https://fullcalendar.io/

fzs1994 (-1) - 4 years ago - Reply 0


very nice!

kapeller77 () - 5 years ago - Reply 0


how to paste this in my mvc model??

agustin () - 5 years ago - Reply 0


Great work!

Stan Williams () - 7 years ago - Reply 0


Beautiful design

Stan Williams () - 7 years ago - Reply 0


http://kalarikendramdelhi.com/ this is am using in my website

amar singh () - 7 years ago - Reply 0


Very nice design. Clean and simple :).

Phil Alexandre () - 7 years ago - Reply 0


i have found the problem on day and week section i.e add event in
current date does not show event on to right place in week and day
section... goes to padding left only on current date..???

Sheikh Masook () - 7 years ago - Reply 0


how to remove a event? xD

Sancas () - 7 years ago - Reply 0


month > day 12
the event send to day 8, check the js

Allan Rodrigues Mucciarelli () - 7 years ago - Reply 0


I have found the problem, it is a css class, when you create the current day you assign an fc-today class and this is the one that causes the problem, if you change it by fc-future it is solved.

Jorge Canales Ortiz () - 7 years ago - Reply 0


The problem occurs in the full column where the day of "today" is generated, if your tests in the following month the problem does not appear, it should be the function that marks the day "today"

Jorge Canales Ortiz () - 7 years ago - Reply 0


that's it! ;)
Congratulations men.

Allan Rodrigues Mucciarelli () - 7 years ago - Reply 0


it's really a fantastic job.

evan hopper () - 7 years ago - Reply 0


this is extremely good work. Greetings from singapore web design company

https://www.quape.com

Eddie Cheng () - 7 years ago - Reply 0


I really love this calendar, thanks for your really awesome work. I appreciate your passion.
disfraces bebe de lujo

Alenda () - 7 years ago - Reply 0


Awesome work.

Sandeep Pattanaik () - 7 years ago - Reply 0


This, brilliant, Calendar seems to load the information at the top only. If you enter information on the 17th or the 10th it appears on the 3rd. but if you enter it on the 24th or the 31st it is in the correct place. is there a reason for this that you are aware of? It would prevent me from searching for it, thus helping me out. Thank you.

James Lupton () - 7 years ago - Reply 0


Thanks Mate!

Arjun Patel () - 8 years ago - Reply 0


hi. Nice work with this calendar.
Is there any tutorial or a file explaining how to use this calendar. I am new to webdesign and trying to learn. I have created the css and js files and have them linked on the html file. the only thing apearing on my webpage is the background.
Thanks in advance for any help. Again... Nice calendar!

Marco Assunção () - 8 years ago - Reply 0


Were you able to use it? I am also getting only background. Please let me know. Thanks.

suchita sayami () - 7 years ago - Reply 0


Hi. No I have not. I have consulted with some friends which are developers and they suggested fullcalendar. It is available on github. I really like the layout on this calendar but the other is nice to

Marco Assunção () - 7 years ago - Reply 0


Thank you Marco for quick response. This saves my time. I will try github calendar. :)

suchita sayami () - 7 years ago - Reply -2


You`re welcome. Fullcalendar worked for me because I am using laravel in my project. I don't know if it is the case with you.

Marco Assunção () - 7 years ago - Reply 0