Полный календарь с Twitter Bootstrap?
В Java все находится в форме класса.
Если вы хотите использовать любой объект, тогда у вас есть две фазы:
- Объявить
- Инициализация
Пример:
- Объявление:
Object a; - Инициализация:
a=new Object();
То же самое для концепции массива
- Объявление:
Item i[]=new Item[5]; - Инициализация:
i[0]=new Item();
Если вы не дают секцию инициализации, тогда возникает NullpointerException.
2 ответа
Есть два способа сделать это, как вы и подразумевали в своем вопросе. Либо:
-
Создайте свою собственную сборку fullcalendar.js .
-
Манипулировать HTML по умолчанию после его рендеринга, предпочтительно используя что-то вроде jQuery.
Пользовательская сборка
Если вы хотите сделать первое, вам нужно отредактировать файл Header.js , а затем перекомпилировать и предоставить свою пользовательскую версию fullcalendar .js . Тем не менее, я бы избегал этого, потому что это увеличит накладные расходы на обновление плагина FullCalendar в будущем. Тем не менее, это ваш звонок, если вы хотите пойти по этому пути. Преимущество в том, что вы все контролируете, и с самого начала все отображается так, как вы хотите.
Переопределения jQuery
Если вы хотите переопределить рендер по умолчанию, он займет всего несколько строк jQuery. Например:
var $fcButtons = $('[class*="fc-button"]').addClass('btn')
, $oldTable = $('.fc-header-right > table');
$('<div>')
.addClass('btn-group')
.appendTo('.fc-header-right')
.append($fcButtons);
$oldTable.remove();
Это вырвет три кнопки по умолчанию из этого <table> и бросит их в <div> с классом btn-group. После этого мы можем отказаться от этой пустой таблицы.
Имейте в виду, что куча CSS все еще будет прикреплена к этим кнопкам, поэтому, хотя технически они теперь являются группой кнопок «Twitter bootstrap», они все равно не будут выглядеть изящными. Я предполагаю, что, учитывая другой ответ, вы можете сами разобраться со всем CSS.
JSFiddle Demo
Это CSS по умолчанию для кнопок Fullcalendar
/* Buttons
------------------------------------------------------------------------*/
.fc-button {
position: relative;
display: inline-block;
cursor: pointer;
}
.fc-state-default { /* non-theme */
border-style: solid;
border-width: 1px 0;
}
.fc-button-inner {
position: relative;
float: left;
overflow: hidden;
}
.fc-state-default .fc-button-inner { /* non-theme */
border-style: solid;
border-width: 0 1px;
}
.fc-button-content {
position: relative;
float: left;
height: 1.9em;
line-height: 1.9em;
padding: 0 .6em;
white-space: nowrap;
}
/* icon (for jquery ui) */
.fc-button-content .fc-icon-wrap {
position: relative;
float: left;
top: 50%;
}
.fc-button-content .ui-icon {
position: relative;
float: left;
margin-top: -50%;
*margin-top: 0;
*top: -50%;
}
/* gloss effect */
.fc-state-default .fc-button-effect {
position: absolute;
top: 50%;
left: 0;
}
.fc-state-default .fc-button-effect span {
position: absolute;
top: -100px;
left: 0;
width: 500px;
height: 100px;
border-width: 100px 0 0 1px;
border-style: solid;
border-color: #fff;
background: #444;
opacity: .09;
filter: alpha(opacity=9);
}
/* button states (determines colors) */
.fc-state-default,
.fc-state-default .fc-button-inner {
border-style: solid;
border-color: #ccc #bbb #aaa;
background: #F3F3F3;
color: rgb(162, 48, 48);
}
.fc-state-hover,
.fc-state-hover .fc-button-inner {
border-color: #999;
}
.fc-state-down,
.fc-state-down .fc-button-inner {
border-color: #555;
background: #777;
}
.fc-state-active,
.fc-state-active .fc-button-inner {
border-color: #555;
background: #777;
color: #fff;
}
.fc-state-disabled,
.fc-state-disabled .fc-button-inner {
color: rgb(122, 69, 69);
border-color: #ddd;
}
.fc-state-disabled {
cursor: default;
}
.fc-state-disabled .fc-button-effect {
display: none;
}
Так что просто попробуйте добавить это в свой CSS и изменить их, как вам нравится