2017-01-05 12 views
0

私は自分のカスタム機能を拡張できる基本的なスケジューラを探しています。 JQxSchedulerはかなりシンプルで軽量に見えます。私は、タイムラインビューを使っていろいろ試してみようとしています。問題は、私は彼らが水平スクロールを持っていることだけです。 Here is an example。私はAPI referenceを見ましたが、私には何も目立っていません。JQxSchedulerタイムラインビューで縦にスクロールできますか?

スクロールの代わりに小さな矢印をクリックして表示する方法はあまりユーザーフレンドリーではありません。これをカスタマイズして縦方向にスクロールするにはどうすればよいですか?

タイムラインビューとの垂直スクロールを同期させるために、左側にツリー構造を作成したいので、これが必要です。

リンクが動作しない場合は、コントロールのコードがここにあります。

$(document).ready(function() { 
    var appointments = new Array(); 

    var appointment1 = { 
     id: "id1", 
     description: "George brings projector for presentations.", 
     location: "", 
     subject: "Quarterly Project Review Meeting", 
     calendar: "Room 1", 
     start: new Date(2015, 10, 23, 9, 0, 0), 
     end: new Date(2015, 10, 23, 16, 0, 0) 
    } 

    var appointment2 = { 
     id: "id2", 
     description: "", 
     location: "", 
     subject: "IT Group Mtg.", 
     calendar: "Room 2", 
     start: new Date(2015, 10, 24, 10, 0, 0), 
     end: new Date(2015, 10, 24, 15, 0, 0) 
    } 

    var appointment3 = { 
     id: "id3", 
     description: "", 
     location: "", 
     subject: "Course Social Media", 
     calendar: "Room 3", 
     start: new Date(2015, 10, 27, 11, 0, 0), 
     end: new Date(2015, 10, 27, 13, 0, 0) 
    } 

    var appointment4 = { 
     id: "id4", 
     description: "", 
     location: "", 
     subject: "New Projects Planning", 
     calendar: "Room 2", 
     start: new Date(2015, 10, 23, 16, 0, 0), 
     end: new Date(2015, 10, 23, 18, 0, 0) 
    } 

    var appointment5 = { 
     id: "id5", 
     description: "", 
     location: "", 
     subject: "Interview with James", 
     calendar: "Room 1", 
     start: new Date(2015, 10, 25, 15, 0, 0), 
     end: new Date(2015, 10, 25, 17, 0, 0) 
    } 

    var appointment6 = { 
     id: "id6", 
     description: "", 
     location: "", 
     subject: "Interview with Nancy", 
     calendar: "Room 4", 
     start: new Date(2015, 10, 26, 14, 0, 0), 
     end: new Date(2015, 10, 26, 16, 0, 0) 
    } 
    appointments.push(appointment1); 
    appointments.push(appointment2); 
    appointments.push(appointment3); 
    appointments.push(appointment4); 
    appointments.push(appointment5); 
    appointments.push(appointment6); 


    // prepare the data 
    var source = 
    { 
     dataType: "array", 
     dataFields: [ 
      { name: 'id', type: 'string' }, 
      { name: 'description', type: 'string' }, 
      { name: 'location', type: 'string' }, 
      { name: 'subject', type: 'string' }, 
      { name: 'calendar', type: 'string' }, 
      { name: 'start', type: 'date' }, 
      { name: 'end', type: 'date' } 
     ], 
     id: 'id', 
     localData: appointments 
    }; 
    var adapter = new $.jqx.dataAdapter(source); 
    $("#scheduler").jqxScheduler({ 
     date: new $.jqx.date(2015, 11, 23), 
     width: 850, 
     height: 600, 
     source: adapter, 
     showLegend: false, 
     ready: function() { 
      $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1'); 
     }, 
     resources: 
     { 
      colorScheme: "scheme05", 
      dataField: "calendar", 
      source: new $.jqx.dataAdapter(source) 
     }, 
     appointmentDataFields: 
     { 
      from: "start", 
      to: "end", 
      id: "id", 
      description: "description", 
      location: "place", 
      subject: "subject", 
      resourceId: "calendar" 
     }, 
     view: 'timelineWeekView', 
     views: 
     [ 
      'timelineDayView', 
      'timelineWeekView', 
      'timelineMonthView' 
     ] 
    }); 
});` 

答えて

1

表示する予定の数に基づいて初期高さを変更することができます。そうすれば、タイムラインビューは下向き矢印なしでそれらのすべてに対応することができます。

関連する問題