我在AngularJ中使用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>
尽管我已经宣布了上述标题，但它总是在特定日期相应地以A或P的时间添加时间。我如何仅在日历中显示标题？
如果指定了一个时间，则将显示为(for am(或p(for pm(；对于全天活动，您可以跳过输入时间...您可以检查以下代码：
UPDATE ：您也可以使用CSS删除时间 - 这样一来，全天事件与具有固定启动和/或结束时间的事件之间将没有区别。
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>如果我们要防止将时间附加到标题上，我们需要定义开始时间和结束时间而不声明以下时间。
$scope.event = {events: [{
title:'test1',
start: '2019-05-05',
end: '2019-05-10'
},
{
title:'test2',
start: '2019-05-05'
}]};
请注意，我尚未上传整个代码，但仅更新了更改的代码。其余代码保持不变。