Question

这是我的第一篇文章，所以要温柔：）

我是PHP，MySQL和JQUERY的新手，但我有很多使用AS3，Java和C ++编程的经验，所以我对这些东西的工作方式有一些参考......

这是我正在尝试做的事情：

我正在为我的教会创建一个网站，并使用Fullcalendar类作为我们的日程安排程序
注意：Google日历不是一个选项
我需要能够设置定期事件，并根据事件是否被取消为每个事件着色

这是我走了多远：

我有一个包含8个字段的MySQL数据库：p_id（仅供我使用），id，title，start，end，allDay，url，cancelled
我有一个包含以下代码的PHP文件：

。

//--------------------------------------------------------------------------
// Example php script for fetching data from mysql database
//--------------------------------------------------------------------------
$host = "fakehost";
$user = "fakeuser";
$pass = "fakepwd";

$databaseName = "fake_db";
$tableName = "tbl_calendar";

//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);

//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$query = "SELECT id,title,start, DATE_FORMAT(start, '%Y-%m-%d %H:%i' ) AS startDate, end, url FROM $tableName ORDER BY startDate DESC";
$result = mysql_query($query) or die(mysql_error());

$array = array();
while($row = mysql_fetch_assoc($result)){
$array[] = $row; 
}  

//--------------------------------------------------------------------------
// 3) echo result as json 
//--------------------------------------------------------------------------
echo json_encode($array);

?>

我的HTML文件中也有以下代码：

<script type='text/javascript'>

$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,

    allDayDefault: false,

    url: true,

    timeFormat: 'h(:mm)t', // uppercase H for 24-hour clock
    agenda: 'h(:mm)t' , // 5:00 - 6:30
    '': 'h(:mm)t', // for all other views

    events: "../data/get_calendar.php",
    eventDrop: function(event, delta) {
        alert(event.title + ' ha sido movido ' + delta + ' dias\n' + '(should probably update your database)');

    },

    loading: function(bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
    },

    eventClick: function(calEvent, jsEvent, view) {

         //alert('Event: ' + calEvent.title);
         //alert('Url: ' + calEvent.url);
         //alert('View: ' + view.name);

         window.open(calEvent.url, blank);
         return false;

    }

});


});

就使用我在数据库中的事件并将它们放在它们所属的日历上而言，这一切都很有效。

问题是我正在尝试为每个事件添加特定的CSS类。我想取消事件为Red，例如（与删除它们相比）。

我查看过很多资料。阅读了很多关于事件来源的内容，我只是不明白......我无法使其发挥作用。理想情况下，我想在我的数据库中添加另一个字段，并让它自动应用类名或颜色。我可以通过硬编码应用颜色，但我只是不明白如何通过数据库来实现。

有人可以帮忙吗？请给我一些简单的步骤，因为显然，我不那么聪明：-S

修改我试图添加一个名为“className”的字段，我编写了相应的CSS规则。我以为会这样做，但是当我检查元素时，我在任何地方都看不到className ......我认为它不会自动从MySQL数据库中应用它。我也在下面尝试过Brotherli的建议，但也无法让它工作（可能是用户错误）。也许我需要更改一些我的fullcalendar jquery代码？

Answer 1

您可以基于每个事件定义CSS类。请参阅http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

中的属性'className'

将您的PHP代码更改为

while($row = mysql_fetch_assoc($result)){
    if ($row['deleted'])
        $row['className'][] = 'deleted';
    if ($row['canceled'])
        $row['className'][] = 'canceled';
    $array[] = $row; 
}

或者，您也可以使用eventRender回调在客户端添加CSS类。

通过MySQL的Fullcalendar动态事件颜色

1 个答案: