仅显示日历特定日期的标题

Question

我在 angularjs 中使用 fullcalendar 如下在日历中显示一些事件值

它正确显示值。

<html>
   <head>
   <link rel="stylesheet" href="../fullcalendar- 
   4.1.0/packages/core/main.css"></script>
   <link rel="stylesheet" href="../fullcalendar- 
   4.1.0/packages/daygrid/main.css"></script>
   <link rel="stylesheet" href="../fullcalendar- 
   4.1.0/packages/list/main.css"></script>
   <link rel="stylesheet" href="../fullcalendar- 
  4.1.0/packages/timegrid/main.css"></script>
  <script type="text/javascript" src="../fullcalendar- 
    4.1.0/packages/core/main.js"></script>
    <script type="text/javascript" src="../fullcalendar- 
    4.1.0/packages/daygrid/main.js"></script>
    <script type="text/javascript" src="../fullcalendar- 
    4.1.0/packages/timegrid/main.js"></script>
    <script type="text/javascript" src="../fullcalendar- 
   4.1.0/packages/list/main.js"></script>
   </head>
   <script>
    $scope.event = {events: [{
            title:'test1',
            start: '2019-05-05 08:00',
            end: '2019-05-10 08:00'
          },
          {
            title:'test2',
            start: '2019-05-05 12:00'
        }]};
    var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            events: $scope.event.events,
            plugins: [ 'dayGrid','timeGrid','list' ],
            header: {
                      left: 'prev,next today',
                      center: 'title',
                      right: 'dayGridMonth,dayGridWeek,timeGridDay'
                    }
        });
        calendar.render();
    });
   </script>
   <body ng-app="myApp" ng-controller="myController">
   <div id="calendar" ng-model="eventSources"></div>    
   </body>
   </html>

虽然我在上面声明了一个标题，但它总是在特定日期相应地附加一个或 p 的时间。如何在日历中只显示标题？

Answer 1

如果指定了时间，则显示为a（上午）或p（下午）；对于 all-day 个事件，您完全可以跳过输入时间...您可以查看下面的代码：

UPDATE：您也可以使用 CSS 删除时间 - 这样 all-day 事件和固定事件之间就没有区别了开始 and/or 次结束。

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.event = {
      events: [{
          title: 'test1',
          start: '2019-05-05',
          end: '2019-05-10'
        },
        {
          title: 'test2',
          start: '2019-05-05'
        },
        {
          title: 'test3',
          start: '2019-05-13 15:00',
          end: '2019-05-15 11:30'
        },
        {
          title: 'test4',
          start: '2019-05-26 10:00',
          end: '2019-05-28 13:30'
        }
      ]
    };
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      events: $scope.event.events,
      plugins: ['dayGrid', 'timeGrid', 'list'],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,timeGridDay'
      }
    });
    calendar.render();
  });

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

.fc-day-grid-event .fc-time {
  display: none;
}

<link href='https://fullcalendar.io/assets/demo-to-codepen.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/core/4.1.0/main.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.css' rel='stylesheet' />
<script src='https://fullcalendar.io/assets/demo-to-codepen.js'></script>
<script src='https://fullcalendar.io/releases/core/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/interaction/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.js'></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController">
  <div id="calendar" ng-model="eventSources"></div>
</body>

Answer 2

如果我们想防止将时间附加到标题中，我们需要定义开始和结束时间而不声明时间，如下所示。

$scope.event = {events: [{
            title:'test1',
            start: '2019-05-05',
            end: '2019-05-10'
          },
          {
            title:'test2',
            start: '2019-05-05'
        }]};

请注意，我没有上传全部代码，只是更新了更改后的代码。其余代码保持不变。

仅显示日历特定日期的标题

Displaying only the title in the specific date of the calendar

fullcalendar

angularjs