tag:crieit.net,2005:https://crieit.net/tags/globalize/feed
「globalize」の記事 - Crieit
Crieitでタグ「globalize」に投稿された最近の記事
2019-12-22T23:48:32+09:00
https://crieit.net/tags/globalize/feed
tag:crieit.net,2005:PublicArticle/15634
2019-12-22T23:48:32+09:00
2019-12-22T23:48:32+09:00
https://crieit.net/posts/react-big-calendar
react-big-calendarの攻略
<h1 id="イベントカレンダー機能"><a href="#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E6%A9%9F%E8%83%BD">イベントカレンダー機能</a></h1>
<p>Reactで作った<a href="https://crieit.net/boards/baseball-score-management/CMS">CMS</a>にカレンダー機能を実装しました。<br />
<a href="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dff7d45dd4f2.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dff7d45dd4f2.jpg?mw=700" alt="" /></a></p>
<h2 id="動作イメージ"><a href="#%E5%8B%95%E4%BD%9C%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8">動作イメージ</a></h2>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">カレンダー機能をリリースしました! <a target="_blank" rel="nofollow noopener" href="https://t.co/uY5j3YkkCV">pic.twitter.com/uY5j3YkkCV</a></p>— キャップ野球情報局 (@cap_bb_info) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/cap_bb_info/status/1208555031894474758?ref_src=twsrc%5Etfw">December 22, 2019</a></blockquote>
<h2 id="使ったライブラリ"><a href="#%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA">使ったライブラリ</a></h2>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://github.com/intljusticemission/react-big-calendar">react-big-calendar</a></li>
<li><a target="_blank" rel="nofollow noopener" href="http://intljusticemission.github.io/react-big-calendar/examples/index.html">ライブラリのデモ</a></li>
</ul>
<h2 id="アジェンダテーブル"><a href="#%E3%82%A2%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%80%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB">アジェンダテーブル</a></h2>
<p>theaderとtbodyが連動していないため、OSSに初めて<a target="_blank" rel="nofollow noopener" href="https://github.com/intljusticemission/react-big-calendar/pull/1557">プルリク</a>を出してみました。<br />
とりあえず応急措置としてスタイルで固定で横幅を指定します。</p>
<pre><code class="css">th.rbc-header:nth-child(1){
min-width: 77px;
}
th.rbc-header:nth-child(2){
min-width: 121px;
}
th.rbc-header:nth-child(3){
width: 100%;
}
</code></pre>
<h2 id="表示の日本語化"><a href="#%E8%A1%A8%E7%A4%BA%E3%81%AE%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">表示の日本語化</a></h2>
<p><a href="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dff7c1f5dfe0.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dff7c1f5dfe0.jpg?mw=700" alt="" /></a></p>
<pre><code class="javascript">import globalize from "globalize";
require("./globalize.ja.js");
const localizer = globalizeLocalizer(globalize);
</code></pre>
<p><a target="_blank" rel="nofollow noopener" href="https://searchcode.com/codesearch/view/15503072/">globalize.culture.ja.js</a></p>
<p>localizerはreact-big-calendarにpropsとして渡します。</p>
<h2 id="ツールバーの日本語化"><a href="#%E3%83%84%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%81%AE%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">ツールバーの日本語化</a></h2>
<p><a href="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dff7bc4c3890.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dff7bc4c3890.jpg?mw=700" alt="" /></a><br />
こちらはglobalizeに対応していないハードコーディングなので、<br />
CSSで元の文字を0pxにし、要素を増やす形で置き換えます。</p>
<pre><code class="css">/*文字置き換え*/
.rbc-btn-group > button{
font-size: 0px;
}
.rbc-btn-group:nth-child(1) > button:nth-child(1)::before{
font-size: 14px;
content: '今日';
}
.rbc-btn-group:nth-child(1) > button:nth-child(2)::before{
font-size: 14px;
content: '←';
}
.rbc-btn-group:nth-child(1) > button:nth-child(3)::before{
font-size: 14px;
content: '→';
}
.rbc-btn-group:nth-child(3) > button:nth-child(1)::before{
font-size: 14px;
content: '月';
}
.rbc-btn-group:nth-child(3) > button:nth-child(2)::before{
font-size: 14px;
content: '週';
}
.rbc-btn-group:nth-child(3) > button:nth-child(3)::before{
font-size: 14px;
content: '日';
}
.rbc-btn-group:nth-child(3) > button:nth-child(4)::before{
font-size: 14px;
content: 'スケジュール';
}
</code></pre>
<h1 id="props"><a href="#props">props</a></h1>
<h2 id="components"><a href="#components">components</a></h2>
<p>event(月・週・日で表示されるコンポーネント)とagenda(スケジュールで表示されるイベント)の動作を記述できる。</p>
<pre><code class="javascript">Event = ({ event }) => {
return (
<span>
{event.title}
</span>);
};
EventAgenda = ({ event }) => {
return (
<div
onClick={()=>{
this.setState({
isOpen:true,
selectEvent:event
})
<span>}</span><span>}</span>
>
{event.type}/{event.title}
</div>
);
};
components=<span>{</span><span>{</span>
event: this.Event,
agenda: {
event: this.EventAgenda
}
<span>}</span><span>}</span>
</code></pre>
<h2 id="onSelectEvent"><a href="#onSelectEvent">onSelectEvent</a></h2>
<p>agendaで表示されるコンポーネントが選択されたときに発火するイベント<br />
(ここではポップアップモーダルを開く)</p>
<pre><code class="javascript">onSelectEvent={(event,e)=>{
this.setState({
isOpen:true,
selectEvent:event
})
<span>}</span><span>}</span>
</code></pre>
<h2 id="eventPropGetter"><a href="#eventPropGetter">eventPropGetter</a></h2>
<p>event.typeによってスタイルを変える処理<br />
参考:<a target="_blank" rel="nofollow noopener" href="https://stackoverflow.com/questions/34587067/change-color-of-react-big-calendar-events">Change color of react-big-calendar events</a></p>
<pre><code class="javascript"><br /> eventPropGetter={(event, start, end, isSelected) => {
let bgColor;
let fontColor;
switch (event.type) {
case "練習会":
bgColor = "#BF7A87";
fontColor = "aliceblue";
break;
default:
bgColor = "#386537";
fontColor = "aliceblue";
break;
}
let newStyle = {
backgroundColor: bgColor,
color: fontColor
};
return {
className: "",
style: newStyle
};
<span>}</span><span>}</span>
</code></pre>
ckoshien