在工具栏

时间:2016-05-04 13:10:35

标签: jquery fullcalendar

我正在使用fullcalendar组件,我发现管理事件非常有趣。我想在标题的右上角向用户添加一些自定义消息。我尝试了以下

    $(document).ready(function(){
         $('#calendar').fullcalendar({
           header:{
              left: 'prev,next,today',
              center: 'title',
              right: 'Manage your events'
           }

    });
})

但它没有显示在标题的右上角。我能够像下面那样呈现自定义文本

$(document).ready(function(){
         $('#calendar').fullcalendar({
           header:{
              left: 'prev,next,today',
              center: 'title',
              right: 'title'
           },
           titleFormat: '[Manage your events]'


    });
}); 

但是通过这样做,日历组件开始在工具栏的中间和右下角显示相同的文本。我想要的是在右上角显示自定义文本并在工具栏的中间部分显示默认标题(月份+年份)。我该怎么办?

2 个答案:

答案 0 :(得分:2)

enter image description here据我所知,标题选项只能显示特定的日历元素,而不能显示自定义文本。 http://fullcalendar.io/docs/display/header/

“但通过这样做,日历组件开始在工具栏的中间和右下角显示相同的文本。” - 当然是这样 - 你在中间和右边都有'头衔'。它正在做文档所说的将会做的事情。 ......

titleFormat似乎期望格式字符串而不是文本。再次;这是根据文档:http://fullcalendar.io/docs/text/titleFormat/ ....它不是为了您尝试使用它的目的。

它可能不是设计为在标题栏中显示自定义文本。查看演示http://fullcalendar.io/的外观。在这种情况下,你可以在右边显示任何内容(只是不要在标题中使用右边),然后做一些自定义的CSS。 (也许是以元素为目标,并尝试使用以下内容添加自定义文本?)

更新。我去了演示http://fullcalendar.io/并使用Chrome中的元素检查器进行了调查。我找到了右手元素的CSS并添加了这个:

.fc-toolbar .fc-right:before {
    float: right;
    content: 'My Custom Text';
}

这对我有用。

答案 1 :(得分:0)

我今天在寻找类似的东西,但就我而言,我只想在工具栏的中心元素中插入自定义文本。在查看了标题工具栏的CSS之后,我想到了将文本放到工具栏的中央(这是在fullcalendar-scheduler的5.3.0版本中,不知道其他版本的CSS是否相同) :

.fc-header-toolbar > .fc-toolbar-chunk:nth-child(2)::before {
  font-size: 1.75em;
  content: 'My Custom Header Text';
}

希望这对其他人有帮助。