使用php从字符串中显示日历上的日期

Posted

技术标签:

【中文标题】使用php从字符串中显示日历上的日期【英文标题】:Display dates on a calendar from a string using php 【发布时间】:2016-05-31 19:14:43 【问题描述】:

如果我有来自表单输入的以下格式的字符串:

02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016

如何在http://fullcalendar.io/ 等日历中将日期显示为事件? 我应该将它们转换为数组,然后如何将它们转换为数组?以及如何向该数组添加更多日期/更新它?

【问题讨论】:

向我展示您尝试过的代码? 在全日历插件中,您需要这种格式的日期... 2014-05-01???对吗? 【参考方案1】:

正如我看到 this page 的源文件,您需要 JSON 数组来创建您的事件。最后你必须创建一个这样的字符串:

events: [
                    
                        title: 'All Day Event',
                        start: '2016-01-01'
                    ,
                    
                        title: 'All Day Event',
                        start: '2016-01-07',
                    ,
                    
                        title: 'All Day Event',
                        start: '2016-01-09'
                    ,
                    
                        title: 'All Day Event',
                        start: '2016-01-16'
                    ,
                    
                        title: 'All Day Event',
                        start: '2016-01-11',
                    
                ]

所以使用这个代码:

<?php

$s = '02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016';
$s = explode(', ', $s);
$dates = [];
foreach($s as $event) 
    //Fix format
    $temp = explode('/', $event);
    $dates[] = array('title' => 'All Day Event', 'start' => $temp[2] . '-' . $temp[1] . '-' . $temp[0] );


$dates = json_encode($dates);

所以最后,你的整个 html 应该是这样的:

<?php

    $s = '02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016';
    $s = explode(', ', $s);
    $dates = [];
    foreach($s as $event) 
        //Fix format
        $temp = explode('/', $event);
        $dates[] = array('title' => 'All Day Event', 'start' => $temp[2] . '-' . $temp[1] . '-' . $temp[0] );
    

    $dates = json_encode($dates);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='../lib/cupertino/jquery-ui.min.css' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='../lang-all.js'></script>
<script>

    $(document).ready(function() 
        var currentLangCode = 'en';

        // build the language selector's options
        $.each($.fullCalendar.langs, function(langCode) 
            $('#lang-selector').append(
                $('<option/>')
                    .attr('value', langCode)
                    .prop('selected', langCode == currentLangCode)
                    .text(langCode)
            );
        );

        // rerender the calendar when the selected option changes
        $('#lang-selector').on('change', function() 
            if (this.value) 
                currentLangCode = this.value;
                $('#calendar').fullCalendar('destroy');
                renderCalendar();
            
        );

        function renderCalendar() 
            $('#calendar').fullCalendar(
                header: 
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                ,
                defaultDate: '2016-01-12',
                lang: currentLangCode,
                buttonIcons: false, // show the prev/next text
                weekNumbers: true,
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: <?php $dates ?>
            );
        

        renderCalendar();
    );

</script>
<style>

    body 
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    

    #top 
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        font-size: 12px;
    

    #calendar 
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    

</style>
</head>
<body>

    <div id='top'>

        Language:
        <select id='lang-selector'></select>

    </div>

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

</body>
</html>

【讨论】:

【参考方案2】:

fullcalendar插件中,您需要"Y-m-d"这种格式的日期。 所以你需要使用 explode() 进行字符串到数组的转换,而不是你可以使用 strtotime() 进行日期格式的转换。

<?php
$string = "02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016";
$explodedDates = explode(",",$string); // explode with comma
$convertedDate = array();
foreach ($explodedDates as $key => $value) 
    $convertedDate[] = date("Y-m-d", strtotime($value)); // conversion in correct format.


echo "<pre>";
print_r($convertedDate);
?>

根据您的问题:以及如何向该数组/更新添加更多日期 是吗?

您可以push将现有数组中的值设为:

array_push($convertedDate,'2015-10-10');
print_r($convertedDate);

【讨论】:

【参考方案3】:

像http://fullcalendar.io/ 这样的日历很复杂。这个问题太笼统了,如果你想知道他们是怎么做的。

将字符串转换为数组是个好问题。 PHP中的explode函数可以使用如下:

$inputs = explode(", ", "02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016");

更多详情请见http://php.net/manual/de/function.explode.php。

向数组中添加元素可以这样完成:

$inputs[] = "03/05/2016";

要更新数组元素,您必须先找到它。您可以通过诸如$inputs[4] 之类的索引来搜索类似上述简单数组的元素。但这可能不是唯一标识日期的最佳解决方案,因为在日历中,您可能在同一天有多个事件。此外,如果您要处理数千个事件,那么找到要更新的事件会非常缓慢。我建议研究其他索引策略。

例如$inputs[year][month][day][id]

但这只是众多可能性之一。

【讨论】:

【参考方案4】:

php的解决方案如下 PHP代码

<?php
$str = explode(',', str_replace(" ","","02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016"));
print_r($str);

$events = array();
foreach($str as $k => $date) 

    $events[$k]['title'] = 'Title';
    $events[$k]['start'] = date('D M d Y H:i:s', strtotime($date));



?>

<script type="text/javascript">
    $(document).ready(function() 

        $('#calendar').fullCalendar(
           header: 
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            ,
            events: <?php echo json_encode($events);?> // load events
        );
    );
</script>

【讨论】:

以上是关于使用php从字符串中显示日历上的日期的主要内容,如果未能解决你的问题,请参考以下文章

FullCalendar - 如何根据逗号分隔的日期从日历上的数据库(mysql)表行显示事件

不使用日历和日期实例显示星期几

不使用日历和日期实例显示星期几

Wordpress:如何删除默认 Wordpress 日历上的存档链接

根据文化显示正确的日期格式

通过日期选择器日历从选定日期获取数据