Fatal编程技术网
  • angularjs/
  • Angularjs 仅显示日历特定日期中的标题

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

angularjs fullcalendar

Angularjs 仅显示日历特定日期中的标题,angularjs,fullcalendar,Angularjs,Fullcalendar,我在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/pac

我在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>


$scope.event={事件：[{
标题：“测试1”，
开始：“2019-05-05 08:00”，
完：2019-05-10 08:00
},
{
标题：“测试2”，
开始时间：2019-05-05 12:00
}]};
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
事件：$scope.event.events，
插件：['dayGrid'，'timeGrid'，'list']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、dayGridWeek、timeGridDay”
}
});
calendar.render（）；
});
虽然我在上面声明了一个标题，但它总是在特定日期相应地在时间后面加上a或p。如何仅在日历中显示标题？

如果有指定的时间，它将显示为a（对于AM）或p（对于PM）；对于全天活动，您完全可以跳过输入时间。。。您可以检查以下代码：

更新：您也可以使用CSS删除时间-这样，全天事件和具有固定开始和/或结束时间的事件之间就没有区别了

angular.module（'myApp'，[]）
.controller（'myController'，函数（$scope）{
$scope.event={
活动：[{
标题：“test1”，
开始日期：2019-05-05，
完：2019-05-10
},
{
标题：“test2”，
开始日期：2019-05-05
},
{
标题：“test3”，
开始：“2019-05-13 15:00”，
完：2019-05-15 11:30
},
{
标题：“test4”，
开始：“2019-05-26 10:00”，
完：2019-05-2813:30
}
]
};
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
事件：$scope.event.events，
插件：['dayGrid'，'timeGrid'，'list']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、dayGridWeek、timeGridDay”
}
});
calendar.render（）；
});

html，
身体{
保证金：0；
填充：0；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
字体大小：14px；
}
#历法{
最大宽度：900px；
利润率：40px自动；
}
.fc天网格事件.fc时间{
显示：无；
}


如果我们不想在标题后面加上时间，我们需要定义开始和结束时间，而不需要像下面那样声明时间


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



请注意，我没有上传整个代码，但只更新了更改后的代码。其余代码保持不变。
但这没有多大帮助，因为OP的数据在ITI@ADyson中有次，我已经用CSS更新了答案，该CSS考虑了提问者的意图。。。警告：全天活动与有开始/结束时间的活动之间没有区别；期待您对此的反馈…这是可行的，但实际上没有必要添加自定义css，因为您可以使用的是您所需要的