laravel 全日历版本5：如何在显示事件时显示更多信息

chy5wohz 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(161)

我正在尝试实现全日历时间线功能，以显示哪个会议室被预订。我想显示谁预订了房间，会议是关于什么，但目前我还不能显示谁预订了房间。在我的数据库中，我有"名称"列，以及除了"标题"。我想知道我如何才能显示名称前面的标题之间的空间。
我的代码如下所示。

<head>
    <meta charset='utf-8' />
    <link href="{{ asset('/css/main.css') }}" rel="stylesheet">
    <script src="{{ asset('/js/main.js') }}"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body>
    <h1></h1>
    <div id='calendar'></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'en',
                scrollTime: '00:00',
                editable: true,
                selectable: true,
                aspectRatio: 1.8,
                headerToolbar: {
                    left: 'today prev,next',
                    center: 'title',                    
                    right: 'myCustomButton'
                },
                initialView: 'resourceTimelineThreeDays',
                views: {
                    resourceTimelineThreeDays: {
                        type: 'resourceTimeline',
                        duration: {
                            days: 31
                        },
                        buttonText: '31 days'
                    }
                },                
                
                resourceAreaHeaderContent: 'Conference Room',
                resources: [{
                        id: 'a',
                        title: 'A'
                    },
                    {
                        id: 'b',
                        title: 'B',
                    },
                    {
                        id: 'c',
                        title: 'C',
                    },
                    {
                        id: 'd',
                        title: 'D',
                    },

                ],
                dateClick: function(date, event, view) {
                    $('#start').val(date);
                    $('#end').val(date);
                    $('#dialog').dialog({
                        title: 'Add Event',
                        width: 600,
                        height: 600,
                        modal: true,
                    })
                },
                events: "{{route('allEvent')}}"
                
            });

            calendar.render();
        });
    </script>
</body>

</html>

视图

任何帮助将不胜感激，因为我已经尝试了多种方法都没有成功。提前感谢你。

laravel

来源：https://stackoverflow.com/questions/75462968/fullcalendar-v5-how-to-show-more-information-when-displaying-events

1条答案

按热度按时间

juud5qan1#

要在FullCalendar时间轴视图中同时显示name和title，您应该更新events属性以Map每个事件对象，并将name和title属性连接成一个由空格分隔的字符串。

events: function(info, successCallback, failureCallback) {
    $.ajax({
        url: "{{route('allEvent')}}",
        success: function(result) {
            // Map the event objects to include both the name and title
            var events = result.map(function(event) {
                return {
                    id: event.id,
                    resourceId: event.resourceId,
                    title: event.name + ' ' + event.title, // Concatenate name and title
                    start: event.start,
                    end: event.end
                };
            });
            successCallback(events);
        },
        error: function(error) {
            failureCallback(error);
        }
    });
}

赞(0）回复(0）举报 2023-02-17

我来回答

laravel 全日历版本5：如何在显示事件时显示更多信息

1条答案

相关问题

热门标签

最新问答