cal-heatmap v4 でマウスホイールでカレンダーを移動する方法
概要
ボタンで前後するのは大変なのでマイスホイールで前後できるようにしてみました
環境
macOS 14.0
nginx 1.25.2
cal-heatmap 4.2.3
サンプルコード
<!DOCTYPE html>
< html>
< head>
< title> cal-heatmap v4</ title>
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< script src = " https://d3js.org/d3.v7.min.js" > </ script>
< script src = " https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js" > </ script>
< script src = " https://unpkg.com/@popperjs/core@2" > </ script>
< script src = " https://unpkg.com/cal-heatmap/dist/plugins/Tooltip.min.js" > </ script>
< script src = " https://unpkg.com/cal-heatmap/dist/plugins/Legend.min.js" > </ script>
< link rel = " stylesheet" href = " https://unpkg.com/cal-heatmap/dist/cal-heatmap.css" >
< style>
.heatmap {
width : 100% ;
overflow : hidden;
}
</ style>
</ head>
< body>
< h1> Test</ h1>
< div>
< div class = " heatmap" >
< div id = " cal-heatmap" > </ div>
</ div>
< div>
< button type = " button" onclick = " pre()" > pre</ button>
< button type = " button" onclick = " next()" > next</ button>
</ div>
</ div>
< script>
const cal = new CalHeatmap ( ) ;
const data = [
{ date: '2023-10-18' , value: 300 } ,
{ date: '2023-10-20' , value: 600 } ,
{ date: '2023-11-01' , value: 100 } ,
{ date: '2023-11-08' , value: 200 } ,
{ date: '2023-11-15' , value: 300 } ,
] ;
cal. paint ( {
data: {
source: data,
x: 'date' ,
y: 'value' ,
defaultValue: 0 ,
} ,
domain: { type: 'month' } ,
subDomain: { type: 'day' } ,
range: 40 ,
date: {
locale: 'ja' ,
timezone: 'Asia/Tokyo' ,
start: new Date ( 2023 , 9 , 1 )
} ,
} , [ [ Tooltip, { enabled: true } ] , [ Legend, { enabled: true , width: 1000 } ] ] ) ;
function pre ( e) {
cal. previous ( ) ;
} ;
function next ( e) {
cal. next ( ) ;
} ;
var calDiv = document. getElementById ( "cal-heatmap" ) ;
calDiv. addEventListener ( "wheel" , function ( e) {
e. preventDefault ( ) ;
if ( event. deltaY < 0 ) {
next ( e) ;
} else if ( event. deltaY > 0 ) {
pre ( e) ;
}
} ) ;
</ script>
</ body>
</ html>
ちょっと解説
追加したのは addEventListener の部分です
wheel イベントを div に追加してマウスが上の場合は cal.next で下の場合は cal.previous をコールしています
イベントの直後で e.preventDefault() しないと画面ごとスクロールしてしまうので必須です
デモ
最後に
まだネット上にはない情報かなと思うので役に立てば幸いです