2

これは私の最初の投稿なので、優しくしてください:)

私は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クラスを追加しようとしていることです。たとえば、キャンセルされたイベントを（削除するのではなく）赤にしたいのですが。

私はたくさんの資料を調べました。イベントソースについてたくさん読んで、私はそれを理解できません...私はそれを機能させることができません。理想的には、データベースに別のフィールドを追加して、クラス名または色を自動的に適用するようにします。ハードコードを使用して色を適用することはできますが、データベースを使用して色を適用する方法がわかりません。

誰か助けてもらえますか？どうやら私はそれほど賢くないので、私にたくさんの簡単なステップを教えてください:-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 に答える