2

这是我的第一篇文章，所以要温柔:)

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

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

  • 我正在为我的教堂创建一个网站，并为我们的调度程序使用 Fullcalendar 类
  • 注意：谷歌日历不是一个选项
  • 我需要能够设置重复事件，并根据每个事件是否已被取消为每个事件着色

这是我已经走了多远：

  • 我有一个包含 8 个字段的 MySQL 数据库：p_id（仅供我使用）、id、title、start、end、allDay、url、cancel
  • 我有一个包含以下代码的 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 类。例如，我希望取消的事件是红色的（而不是删除它们）。

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

任何人都可以帮忙吗？请给我很多简单的步骤，因为显然，我没那么聪明:-S

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

4

1 回答 1

0

您可以基于每个事件定义 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 类。

于 2012-09-18T14:18:30.397 回答