1

3日間のイベントのカレンダーを表示したい。そして、私はそれを次のようにしたい： ここに画像の説明を入力

1日目、2日目、3日目はリンクで、クリックするとカレンダーがスライダーのように機能し、次のカレンダーにスライドします。「html ウェブサイト カレンダー表示」、「jquery カレンダー プラグイン」などをオンラインで検索しましたが、欲しいものは何もありませんでした。これを実装する方法が本当にわかりません。これは純粋なhtml + cssですか、それともjqueryを持っていますか? 上記のようなカレンダーを設計および実装するためのデモ/チュートリアルはどこにありますか?

4

2 に答える 2

2

新規:フィールドとポップアップ内に非表示のデータがある jsBin デモ

jsBin デモ

jQuery:

var start_day = 0; // set your start day to show first!

$('.day').fadeTo(0,0.3).eq(start_day).fadeTo(0,1);
$('ul#calendar_navigation li').eq(start_day).addClass('active');
  
var calWidth = $('#calendar').width();

$('ul#calendar_navigation li').click(function(){
  
    $('ul#calendar_navigation li').removeClass('active');
    $(this).addClass('active');
  
    var thisIndex = $(this).index();
  
    $('.day').stop().fadeTo(300,0.3).eq(thisIndex).fadeTo(300,1);
    $('#days').stop().animate({left: '-'+calWidth*thisIndex },800);
  
});

HTML: 

    <ul id="calendar_navigation">
      <li>Day 1</li>
      <li>Day 2</li>
      <li>Day 3</li> 
    </ul>

    <div id="days">
      
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 1 (oct 3)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>    
    <!-- -->
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 2 (oct 4)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>
   <!-- -->
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 3 (oct 5)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>      
      
    </div><!-- days -->

  </div>
  </div><!-- cal. wrapper -->

CSS:

body{
  font-family:arial;
}
/* CALENDAR */
#calendar_wrapper{
  position:relative;
  margin:0 auto;
  width:100%;
  overflow:hidden;
}
#calendar{
  position:relative;
  margin:0 auto;
  width:800px;
}
ul#calendar_navigation{
  list-style:none;
  padding:0;
  font-size:30px;
  height:30px;
}
ul#calendar_navigation li{
  padding-right:30px;
  display:block;
  float:left;
  list-style:none; 
}
ul#calendar_navigation li.active{
  list-style:none; 
  border-bottom:5px solid #C5FF74;
}
#days{
  clear:both;
  position:relative;
  width:999999px;
}
.day{
  position:relative;
  float:left;
  left:0px;
  width:800px;
  box-shadow:0px 2px 4px #999;
}

#calendar table{
    font-size:13px;
    width:100%;
}

#calendar table tr th,
#calendar table tr td{
  vertical-align:middle;
  height:50px;
  width:15%;
  padding:1%;
}
#calendar table tr td{
  background-color:#C5FF74;
}

#calendar table tr{
  vertical-align:middle;
}

#calendar table tr td:first-child{
  width:140px;
}
于 2012-10-01T02:10:11.600 に答える
0

SlidesJSをご覧になることをお勧めします。カスタムのページネーションを使用する必要があります。

于 2012-10-01T01:32:30.603 に答える