FullCalendar将周视图更改为垂直列表，而不是水平表格列 [英] FullCalendar Change Week View to Vertical List instead of Horizontal Table Columns
问题描述
如果唯一的方法是修改底层代码，在代码中创建周视图的表格内容？如果我弄清楚它在哪里，我可能会修改它以显示为列表而不是表格...... 解决方案
我想用我的日历做同样的事情。在移动屏幕上，水平布局不太可用。使用当前版本的FullCalendar（2.1.1），我可以创建一个垂直布局，看起来好像不太合适： $ b
执行此操作：
通过在BasicWeekView的代码下方添加以下代码来更改 fullcalendar.js 文件：
/ *具有垂直运行的简单日单元的周视图
----------------------------------- --------------------------------------- * /
fcViews .vertWeek = VertWeekView; //注册这个视图
函数VertWeekView（日历）{
BasicView.call（this，calendar）; //调用超级构造函数
}
VertWeekView.prototype = createObject（BasicView.prototype）;
$ .extend（VertWeekView.prototype，{
name：'vertWeek'，
incrementDate：function（date，delta）{
return date.clone（） .stripTime（）。add（delta，'weeks'）。startOf（'week'）;
}，
render：function（date）{
this.intervalStart = date.clone（）。stripTime（）。startOf（'week'）;
this.intervalEnd = this.intervalStart.clone（）。add（1，'weeks'）;
this.start = this.skipHiddenDays（this.intervalStart）;
this.end = this.skipHiddenDays（this.intervalEnd，-1，true）;
this.title = this.calendar .formatRange（
this.start，
this.end.clone（）。subtract（1），// make inclusive by 1 ms
this.opt（'titleFormat'），
'\\\—'//强调破折号
）;
BasicView.prototype.render.call（this，this.getCellsPerWeek（），1，true）;
}
}）;
;;
将 CSS 添加到您的网页：
.fc-vertweek-header {
overflow：hidden;
宽度：100％;
}
.fc-vertweek-day {
float：right;
margin：10px;
现在在 javascript 调用 fullCalendar 指定以下两项：
defaultView：vertWeek，
code> 和：
dayRender ：function（date，cell）{
//获取当前视图
var view = $（'＃meal_calendar'）。fullCalendar（'getView'）;
//检查视图是否是新的vertWeek -
//如果你想使用不同的视图你不想混淆它们全部
if（ view.name =='vertWeek'）{
//隐藏小部件头部 - 看起来很奇怪，否则
$（'。fc-widget-header'）。hide（）;
//用空白空格删除默认的天数。根据你的字体保持正确的高度。
$（'。fc-day-number'）。html（'< div class =fc-vertweek-day>& nbsp;< / div>'）;
//创建一个新的日期字符串以放置
var this_date = date.format（'ddd，MMM Do'）;
//将新日期放入单元格标题中。
cell.append（'< div class =fc-vertweek-header>< div class =fc-vertweek-day>'+ this_date +'< / div>< / div> ;'）;
}
}，
Anyway to change the way the Days show in the Week View? I'd rather see a vertical list of the vents by day instead of the horizontal table view of the days. reasoning is it looks pretty bad when on mobile devices and any devices with small width screens...
If the only way to do this is through modifying the underlying code, where in the code creates the table content for the Week view? If I figure out where that is, I could probably modify it to display as a list instead of a table...
I wanted to do the same thing with my calendar. On a mobile screen the horizontal layout is not very usable. With the current version of FullCalendar (2.1.1) I was able to create a vertical layout that looks half-decent:
Do this:
Change the fullcalendar.js file by adding this just below the code for the "BasicWeekView":
/* A week view with simple day cells running vertically
--------------------------------------------------------------------------*/
fcViews.vertWeek = VertWeekView; // register this view
function VertWeekView(calendar) {
BasicView.call(this, calendar); // call the super-constructor
}
VertWeekView.prototype = createObject(BasicView.prototype);
$.extend(VertWeekView.prototype, {
name: 'vertWeek',
incrementDate: function(date, delta) {
return date.clone().stripTime().add(delta, 'weeks').startOf('week');
},
render: function(date) {
this.intervalStart = date.clone().stripTime().startOf('week');
this.intervalEnd = this.intervalStart.clone().add(1, 'weeks');
this.start = this.skipHiddenDays(this.intervalStart);
this.end = this.skipHiddenDays(this.intervalEnd, -1, true);
this.title = this.calendar.formatRange(
this.start,
this.end.clone().subtract(1), // make inclusive by subtracting 1 ms
this.opt('titleFormat'),
' \u2014 ' // emphasized dash
);
BasicView.prototype.render.call(this, this.getCellsPerWeek(), 1, true);
}
});
;;
Add this CSS to your page:
.fc-vertweek-header {
overflow: hidden;
width: 100%;
}
.fc-vertweek-day {
float: right;
margin: 10px;
}
Now in your javascript call to fullCalendar specify these two things:
defaultView: vertWeek,
and :
dayRender: function( date, cell ) {
// Get the current view
var view = $('#meal_calendar').fullCalendar('getView');
// Check if the view is the new vertWeek -
// in case you want to use different views you don't want to mess with all of them
if (view.name == 'vertWeek') {
// Hide the widget header - looks wierd otherwise
$('.fc-widget-header').hide();
// Remove the default day number with an empty space. Keeps the right height according to your font.
$('.fc-day-number').html('<div class="fc-vertweek-day"> </div>');
// Create a new date string to put in place
var this_date = date.format('ddd, MMM Do');
// Place the new date into the cell header.
cell.append('<div class="fc-vertweek-header"><div class="fc-vertweek-day">'+this_date+'</div></div>');
}
},
这篇关于FullCalendar将周视图更改为垂直列表，而不是水平表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
