突出fullcalendar事件扩展到多个行/列 [英] Highlight fullcalendar events that expands over multiple rows/columns

问题描述

在我的角 Web应用程序我使用的角UI日历结合 Fullcalendar 显示用户的事件。

在此，当用户点击上的一个事件是被强调的，但是这有一个小缺点，因为它是现在，因为当一个事件扩展到多个行（在月视图）或多列（在星期视图），它不是得到凸显了孔的事件 - 截图1。

截图1

在形象，我们有 2。事件，从3月19日进入21月，但你可以看到，被强调的唯一的部分是19和20月。

在截图2 是我真正想要的，所以用户不会感到困惑，也许认为它实际上是两个事件，而不是一个事件（它会在这种情况下）。

截图2

这是我的控制器，增加了突出显示该事件的一部分。

控制器

  $ scope.alertOnEventClick =功能（calEvent，jsEvent，视图）{
   $（FC-国家彰显）removeClass移除（FC-国家彰显）。
   angular.element（jsEvent.currentTarget）.addClass（FC-状态高亮）;
};
 

解决方案

悬停演示

Fullcalendar 2.4（无角） HTTPS ：//jsfiddle.net/4kbLa4da/

  $（'＃日历'）。fullCalendar（{
  defaultDate：2016年3月1日，
  事件：[{
    开始：2016年3月1日，
    结束：2016年3月5日，
    标题：'事件1'
  }，{
    开始：2016年3月6日，
    结束：2016年3月15日，
    标题：'事件2'，
    ID：3
  }]，
  eventRender：函数（事件，元素，视图）{
    // event._id得到自动填充，无论是event.id或自动生成的值
    element.attr（数据ID，event._id）;
    toggleClass（event._id）;
  }，
  eventMouseover：函数（事件，jsEvent，视图）{
    toggleClass（event._id）;
  }，
  eventMouseout：函数（事件，jsEvent，视图）{
    toggleClass（event._id）;
  }
}）;功能toggleClass（ID）{
  / *查找特定事件的所有段和切换类* /
  变量$事件= $（'a.fc事件[数据-ID =+身份证+']'）;
  $。每个（$事件，功能（）{
    $（本）.toggleClass（我的高亮'）;
  }）;
}
 

如果您想要事件点击： https://jsfiddle.net/4kbLa4da/2/

  eventClick：函数（事件，jsEvent，视图）{
    toggleClass（event._id）;
  }
 / * ... * /
/ *和改变toggleClass先关闭它* /
功能toggleClass（ID）{
  / *查找特定事件的所有段和切换类* /
  变量$事件= $（'a.fc事件[数据-ID =+身份证+']'）;
  $（'a.my-亮点'）。每个（函数（）{
    $（本）.toggleClass（我的高亮'）;
  }）;
  $。每个（$事件，功能（）{
    $（本）.toggleClass（我的高亮'）;
  }）;
}
 

In my Angular web app I'm using Angular UI Calendar combined with Fullcalendar to show user's events.

In this when a user click on an event it gets highlighted, but this has a little downside to it as it is right now, because when an event expands over multiple rows (in month view) or multiple columns (in week view), it's not the hole event that get highlighted - Screenshot 1.

Screenshot 1

In the image we have 2. Event that goes from 19. March to 21. March, but as you can see the only part that gets highlighted are the 19. and 20. March.

In Screenshot 2 is how I really want it, so users don't get confused and maybe think that it's actually two events, instead of one event (which it would be in this case).

Screenshot 2

This is the part of my controller that adds the highlighting to the event.

Controller

$scope.alertOnEventClick = function(calEvent, jsEvent, view){
   $(".fc-state-highlight").removeClass("fc-state-highlight");
   angular.element(jsEvent.currentTarget).addClass("fc-state-highlight");
};

解决方案

Fullcalendar 2.4 on hover demo (non-angular) https://jsfiddle.net/4kbLa4da/

$('#calendar').fullCalendar({
  defaultDate: '2016-03-01',
  events: [{
    start: '2016-03-01',
    end: '2016-03-05',
    title: 'Event 1'
  }, {
    start: '2016-03-06',
    end: '2016-03-15',
    title: 'Event 2',
    id: 3
  }],
  eventRender: function(event, element, view) {
    // event._id gets auto-populated, either event.id or auto-generated value
    element.attr('data-id', event._id);
    toggleClass(event._id);
  },
  eventMouseover: function(event, jsEvent, view) {
    toggleClass(event._id);
  },
  eventMouseout: function(event, jsEvent, view) {
    toggleClass(event._id);
  }
});

function toggleClass(id) {
  /* Find all segments for the specific event and toggle a class */
  var $event = $('a.fc-event[data-id="' + id + '"]');
  $.each($event, function() {
    $(this).toggleClass('my-highlight');
  });
}

If you want it on event click: https://jsfiddle.net/4kbLa4da/2/

eventClick: function (event, jsEvent, view) {
    toggleClass(event._id);
  }
 /* ... */
/* And change toggleClass to turn it off first */
function toggleClass(id) {
  /* Find all segments for the specific event and toggle a class */
  var $event = $('a.fc-event[data-id="' + id + '"]');
  $('a.my-highlight').each(function () {
    $(this).toggleClass('my-highlight');
  });
  $.each($event, function() {
    $(this).toggleClass('my-highlight');
  });
}

这篇关于突出fullcalendar事件扩展到多个行/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！