Angular-bootstrap calendar mwl - ＆gt;事件的其他符号而不是点

Question

我使用此日历可视化我的日历活动： mwl calendar。现在我想将事件“点”标志更改为“箭头”标志。怎么做到这一点？

<div class="events-list" ng-show="day.events.length > 0">
    <a ng-repeat="event in day.events | orderBy:'startsAt' track by event.$id"
        href="javascript:;"
        ng-click="$event.stopPropagation(); vm.onEventClick({calendarEvent: event})"
        class="pull-left event"
        ng-class="event.cssClass"
        ng-style="{backgroundColor: event.color.primary}"
        ng-mouseenter="vm.highlightEvent(event, true)"
        ng-mouseleave="vm.highlightEvent(event, false)"
        tooltip-append-to-body="true"
        uib-tooltip-html="vm.calendarEventTitle.monthViewTooltip(event) | calendarTrustAsHtml"
        mwl-draggable="event.draggable === true"
        drop-data="{event: event, draggedFromDate: day.date.toDate()}">
    </a>
</div>

我将“事件指针”标记为黄色。这是我想要改变的符号。

Answer 1

我也不确切地知道你试图实现什么，因为你的问题文本有点令人困惑。所以，现在我通过添加一些CSS样式和自定义事件颜色用箭头替换“事件点”。请查看此工作 plnkr demo 并提出建议。

.event.arrow {
  background: url(data:image/png;base64,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);
  background-position: left center;;
  background-repeat: no-repeat;
  background-size: 25px 25px;
}

mwl-calendar .event {
  width:25px;
  height:15px;
  border:none;
  box-shadow: none;
}

我还添加了一个名为transparency的自定义事件颜色。通过这种方式，我能够删除这些不想要的背景（我保证）。

//add custom color      transparency
calendarConfig.colorTypes.transparency = {
  primary: "rgba(255, 255, 255, 0)",
  secondary: "rgba(255, 255, 255, 0)"
}

vm.events = [
  {
    title: 'An event',
    color: calendarConfig.colorTypes.transparency,
    startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
    endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
    draggable: true,
    resizable: true,
    actions: actions,
    cssClass: 'arrow'
  }, {
    title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
    color: calendarConfig.colorTypes.transparency,
    startsAt: moment().subtract(1, 'day').toDate(),
    endsAt: moment().add(5, 'days').toDate(),
    draggable: true,
    resizable: true,
    actions: actions,
    cssClass: 'arrow'
  }, {
    title: 'This is a really long event title that occurs on every year',
    color: calendarConfig.colorTypes.warning ,
    startsAt: moment().startOf('day').add(7, 'hours').toDate(),
    endsAt: moment().startOf('day').add(19, 'hours').toDate(),
    recursOn: 'year',
    draggable: true,
    resizable: true,
    actions: actions
  }
];