This project forked from fullcalendar/fullcalendar
Year view implementation
Home Page: http://epsy.ldtp.net/fullcalendar/demos/
License: MIT License
A full-sized drag & drop event calendar (jQuery plugin).
This fork (tpruvot/fullcalendar) is based on arshow Fullcalendar v2.2 branch.
It implements an additional year view (12 months) and can be used to display vacations periods.
The year table layout is customizable (2x6, 3x4, 4x3, 6x2), and the first month can be tuned to display school years.
For contributors:
I'd need a year-view where each month is shown in one row, similar as the month-view has one week per row...
That would probably be a big code change?
Do you know any other plugins doing that?
Hi there,
If I extract your custom view code (year view) into a seperate file, and then try to upgrade fullcalendar to 2.4.0 do you think all would work nicely?
When I using drag and drop events to yearview calendar, it's duplicated 12 times (as 12 month).
P/S: I used drag and drop of AdminLTE template at https://almsaeedstudio.com/themes/AdminLTE/pages/calendar.html
is it possible to show all events list in this fork?
if can't, how to add custom buttons in v2.2.7, i just add one button but not working.
seems the custom buttons only works after v2.4.
header: { left: 'prev,next today', center: 'title', right: 'listButton common,year,month' }, customButtons: { listButton: { text: 'list all events', click: function() { location.href='/allevents' } }, },
Is not quite a issue!
Is just adding the classes for days in past and on future because at this moment just have 'fc-today'.
I discover this fullcalendar some days ago and in the version v1.6.4(whitout year view) have those 2 classes and I start by adding some css styles for '.fc-past .fc-day-number'.
So as it is a small update, for who wants to do the pull request please do so.
In fullcalendar.js at line +-3004 on function updateCells() { is this:
if (+d == +today && d.getMonth() == i) {
cell.addClass(tm + '-state-highlight fc-today');
}
Please add this 6 lines :
else if (d < today) {
cell.addClass('fc-past');
}
else {
cell.addClass('fc-future');
}
Final result:
if (+d == +today && d.getMonth() == i) {
cell.addClass(tm + '-state-highlight fc-today');
}
else if (d < today) {
cell.addClass('fc-past');
}
else {
cell.addClass('fc-future');
}
//--------------
Css can be updated for opacity for more browsers:
.fc-grid .fc-other-month .fc-day-number {
/* IE 8 /
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/ IE 5-7 /
filter: alpha(opacity=30);
/ Netscape /
-moz-opacity: 0.3;
/ Safari 1.x */
-khtml-opacity: 0.3;
opacity: 0.3;
}
And is all, folks ;-)
When initialize calendar setup is Danish language and first day is Monday (1 in config)
Then I want to change to English with first day 0. Year view is displaying wrong template (dates not starting from Sunday and still having same display as was at initialize step).
At initialize calendar:
View after changing on month view after recreation of calendar (Display as expected):
Year view is wrong:
Code that using:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../dist/fullcalendar.css' rel='stylesheet' />
<link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment/moment.js'></script>
<script src='../lib/jquery/dist/jquery.js'></script>
<script src='../dist/fullcalendar.js'></script>
<script src='../dist/lang/da.js'></script>
<script>
$(document).ready(function() {
calendarrender()
$("#btn").click(function(){
$('#calendar').fullCalendar( 'destroy' );
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
lang: 'en',
firstDay: 0,
});
});
function calendarrender(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
// defaultDate: '2015-01-12',
defaultView: 'year',
selectable: true,
selectHelper: true,
lang: 'da',
firstDay: 1,
editable: true
})}});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<button type="submit" id="btn">click</button>
<div id='calendar'></div>
</body>
</html>
someone who can help me to solve this issue, thanks in advance^
So i don´t know if this is a bug or it has to be like this, but when trying to check for the current month being rendered the view month integer is allways 12. Is it suposed to be like this ? If so how can one get the current month being rendered ?
The point is i want in eventRender callback for yearview return false when the event do not belong's to that month.
Hello , the school view isn't working properly. Its skipping a year every time I click Next.
I've found this bug (or I'm doing something wrong...): http://stackoverflow.com/questions/30479185/bugs-in-jquery-fullcalendar-for-year-view-by-tanguy-pruvot?noredirect=1#comment49041025_30479185
Hi,
First of all, thank you for this great fork of fullcalendar :)
I've detected some issues about the printing:
Some events are shifting from their right position, which make the calendar to be false.
Also, but I think this is about yearview but also the other version of fullcalendar, the event background is not displayed and so the calendar is pretty empty.
For this last issue, I've tried to set a border in the .print.css to keep them displayed on media="print":
.fc-event, .fc-event-inner {
/* background: #fff !important; */
border: 1px dashed red !important;
color: #000 !important;
}
Some ones (as long event) finally appear after this fix but most of them still not displayed.
If you got a solution, it will be great :) !
Thx again
In year view, the option firstDay when set to a value other than its default 0 (Sunday), makes the calendar's each day header title show the correct shifted day, but the actual days inside each month are not offset, so they show incorrect. In the other views (month, etc) the day offsets are correct.
When firstDay=0 it works fine: 2015-01-01 is a Thursday as expected:
When firstDay=1 (Monday), 2015-01-01 is transmuted to a Friday!
So it looks like it's been a couple years since this project started, but unfortunately it's still the only good option for a 12 month view via FullCalendar.
If I pull in the fullcalendar script from your dist dir and try to create a calendar with defaultView: 'year', I get this error:
Cannot read property 'class' of undefined:
return new spec['class'](t, spec.options, viewType);
I went into your actual demo, and pulled the cdn version you're using there (which is apparently also 2.2.7): http://epsy.ldtp.net/fullcalendar/dist/fullcalendar.js. This works fine for some reason.
http://epsy.linuxd.net/fullcalendar-yearview/demos/
is not working...
what about setting up a jsfiddle or similar?
Hi, Tanguy,
_finally_ I've managed to make it work, ufa, ain't there an easier way? ;-)
Great stuff, well worth it 👍
In the readme you mention git clone git://github.com/arshaw/fullcalendar.git but I believe should be /tpruvot/ instead. Well, only that worked for me :)
Doubt: when we do a grunt, fullcalendar.js latest version is pulled from the repository and your repo merged into it to create the output, is that correct?
Does the year-view need to be activated by argument or something?
I replaced the library, but there's no year-view...
It seems the merge of 2.2.7 in this commit 10e7788 doesn't include any modifications to the dist folder, so currently this folder seems to contain the arshaw version (i.e, no year view at all).
Could you please rebuild dist so it has your modifications included?
I couldn't find where to select the different layout (6x2 2x6 for instance)
defaultButtonText: {year: "年", month: "月", week: "周", day: "日", list: "日程"},
allDayText: "全天",
eventLimitText: function (e) {
return "另外 " + e + " 个"
}
Hi is it possible someone have latest yearview without moment.js merge ? I'm having problems rendering in IE8 in this line. It seems somehow rangeStart.format() isn´t recognized in this line.
Hi there awsome tpruvot who made this branch and fellow developers.
Has you can see here when yearview display is set to (3x4) all months have scrolls in it.
But in fullcalendar.js source code if i modify this :
The display shows like this:
First 2 months are not resized and 3 one have a "semi" scroll, plus this is in Portuguese language and the word for "year" in portuguese is "Ano" and not year :P
The code is the default showned in the examples but view is set (3x4)
Hi,
it seems to be a optical problem when using with bootstrap (and bootswatch in my case).
the bootstrap.css sets a general background-color to all tables and then it looks like in the screenshot, somehow it doesn't paint some borders.
i tried to set "background-color:transparent" for all calendar tables, but then the colored cells have no borders, like this (look at the green cells):
has someone an idea to get around that? :)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.