FullCalendar - 更改basicDay视图中的文本 [英] FullCalendar - Changing the text in the basicDay view

问题描述

当用户点击月视图中的日期链接时，我希望日视图显示更多信息。所以，当他们点击此链接时：

我想它显示此：

基本上，我想将订单描述附加到订单号。我已从Web API调用中返回事件详细信息中的订单描述，并将该描述用作月视图上的工具提示。以下是我日历定义中的一部分eventRender和viewRender方法：

  eventRender：function（event，element）{
 event.title = event.OrderNumber; 
 element.find（'。fc-title'）。append（'< a href =...'+ title ='+ event.Description +'>'+ event.OrderNumber +' < / a>'）; 
} 
，viewRender：function（view，element）{
 if（view.name =='basicDay'）{
 element.find （'.fc-title'）。append（'< a href =...'title =''+ event.Description +'>'+ event.Description +'< / a>'）; 
 
 
 
 
 
 
 $ p在viewRender中，我试图重复所做的工作在eventRender中（改变.fc-title类），但这没有奏效。在调试过程中评估传递给viewRender方法（视图和元素）的对象并没有显示出我所需要的任何有用的属性，但也许它们隐藏了我的视线。
解决方案
再一次，发布我的问题的魔力帮助解决了这个问题。我发现日历声明中的eventAfterAllRender事件是关键：
  $（'＃calendar' ）.fullCalendar（{
 eventRender：function（event，element）{...}，
 viewRender：function（view，element）{...}，
 eventAfterAllRender：function（view ）{
 if（$（'。fc-basicDay-view'）。length> 0）{
 $（'。cl'）。each（function（i，item）{
 var title = item.title; 
 item.innerText = item.innerText +' - '+ item.title; 
 $（this）.css（'font-size'，'14px'）; 
}）; 
} 
} 
}）; 
  
我最初尝试将代码放入eventRender事件中，但是通过开发人员工具，我注意到该页面还没有完成渲染，所以我试图修改的HTML元素还没有创建。
 
 
 
把代码在eventAfterAllRender事件中工作，因为日历已经完成了渲染，然后我可以查找链接标签并修改它们。在我的代码中，我检查'fc-basicDay-view'类是否存在，它是在我点击月视图上的日期链接（在我的原始文章中）并呈现日视图之后出现的。
 
 
 
每个链接类都附有一个名为cl的类。这是我最初创建链接（这是对原始帖子的更改）时手动附加到eventRender事件中的类：
  element.find（'。fc-title'）。append（'< a href =...'+ title ='+ event.Description +'class =cl>'+ event .OrderNumber +'< / a>'）; 
  
然后在eventAfterAllRender事件中的代码循环遍历所有元素，从每个链接中拉出title属性（我也在eventRender事件中分配了该属性），并将其附加到innerText属性。
 
When a user clicks on the day link in the month view, I would like the day view to display a bit more information. So when they click this link:



I would like it to display this:



Basically, I want to append the order description to the order number. I already have the order description in the event details returned from my Web API call, and I use that description as a tool tip on the month view. Here are the eventRender and viewRender methods that are part of my calendar definition:
    eventRender: function (event, element) {
        event.title = event.OrderNumber;
        element.find('.fc-title').append('<a href="...' + title="' + event.Description + '">' + event.OrderNumber + '</a>');
    }
    , viewRender: function (view, element) {
        if (view.name == 'basicDay') {
            element.find('.fc-title').append('<a href="...' title="' + event.Description + '">' + event.Description + '</a>');
        }
    }
In the viewRender, I have attempted to duplicate what worked in the eventRender (changing the ".fc-title" class), but that hasn't worked. Evaluating the objects passed into the viewRender method (view and element) while debugging haven't shown me any useful properties for what I need, but perhaps they are hiding from me.
解决方案
Once again, the magic of posting my question has helped solve the problem. I found that the "eventAfterAllRender" event, which is in the calendar declaration, was the key:
$('#calendar').fullCalendar({
    eventRender: function (event, element) { ... },
    viewRender: function (view, element) { ... }, 
    eventAfterAllRender: function (view) {
        if ($('.fc-basicDay-view').length > 0) {
            $('.cl').each(function (i, item) {
                var title = item.title;
                item.innerText = item.innerText + ' - ' + item.title;
                $(this).css('font-size', '14px');
            });
        }
    }
});
I had originally tried to put the code in the "eventRender" event, but evaluating the page through the developer tools, I noticed that the page hadn't finished rendering at that point, so the HTML elements I was trying to modify had not yet been created.

Putting the code in the "eventAfterAllRender" event worked because the calendar had finished rendering, and I could then look for the link tags and modify them. In my code, I check to see if the 'fc-basicDay-view' class is present, which it is after I click on the day link on the month view (in my original post) and the day view is rendered.

Each of the link classes has a class called "cl" attached to it. This is a class I manually attach in the "eventRender" event when originally creating the link (which is a change from the original post):
element.find('.fc-title').append('<a href="...' + title="' + event.Description + '" class="cl">' + event.OrderNumber + '</a>');
The code in the "eventAfterAllRender" event then loops through all the elements, pulls the "title" property from each link (which I also assigned in the "eventRender" event), and appends it to the innerText property.

                        
这篇关于FullCalendar  - 更改basicDay视图中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！