【食事内容管理Webアプリ】メモ内容の表示

events: [
    {
      extendedProps: {
        prop1: 'メモ1',
        prop2: 'メモ2'
      }
      // {prop1: "メモ1", prop2: "メモ2"}
  ]

var calendar = new Calendar(calendarEl, {
  events: [
    {
      eventMouseEnter: function(mouseEnterInfo) {
        let memo = mouseEnterInfo.event.extendedProps.memo; // メモの内容取得
        // メモ表示処理
      },
      eventMouseLeave: function(mouseLeaveInfo) {
        // メモ非表示処理
      }
    }
  ]
})

@Data
public class EventBean {

	private String start;
	private String title;
	private String backgroundColor;
	private String borderColor = "white";
	private Map<String, String> extendedProps;
	
	public EventBean start(String start) {
		this.start = start;
		return this;
	}
	
	public EventBean title(String title) {
		this.title = title;
		return this;
	}
	
	public EventBean backgroundColor(String backgroundColor) {
		this.backgroundColor = backgroundColor;
		return this;
	}
	
	public EventBean memo(String memo) {
		if (memo != null) {
			extendedProps = new HashMap<>();
			extendedProps.put("memo", memo);
		}
		return this;
	}
}

@Repository
public class CalendarRepositoryImpl implements CalendarRepository {
	
	@Autowired
	JdbcTemplate jdbcTemplate;

	@Override
	public List<EventBean> getEvents(String year, String month) {
		String date = year + month + "01";
		
		List<EventBean> events = jdbcTemplate.query(
				SqlConst.getQueryFromXml(SqlConst.MENU_FOR_EACH_MONTH),
				(rs, rowNum) -> new EventBean()
										.start(rs.getString("start"))
										.title(rs.getString("title"))
										.backgroundColor(rs.getString("backgroundColor"))
										.memo(rs.getString("memo")),
				date,
				date);
		
		return events;
	}
	
	...
	
}

<query id="forEachMonth" comment="各月のメニューを取得">
  <![CDATA[
  	select
  		menu.eating_date start
  		, dishes.dish_name title
  		, menu.meal_type_code code
  		, meal_types.color backgroundColor
  		, menu.memo
  	from
  		menu
  	inner join
  		dishes
  	on
  		menu.dish_code = dishes.dish_code
  	inner join
  		meal_types
  	on
  		menu.meal_type_code = meal_types.meal_type_code
  	where
  		menu.eating_date between str_to_date(?, '%Y%m%d') and last_day(str_to_date(?, '%Y%m%d'))
  	order by
  		start
  		, code
  ]]>
</query>

function initializeCalendar(events) {
	let calendarEl = document.getElementById('calendar');
	let calendar = new FullCalendar.Calendar(calendarEl, {
		customButtons: {
			new: {
				text: "new",
				click: showRegistrationModal
			}
		},
		headerToolbar: {
			right: 'new today prev,next'
		},
		eventMouseEnter: showMemo,
		eventMouseLeave: closeMemo,
		contentHeight: "auto",
		events
	});
	calendar.render();
	
	let closer = document.getElementById('closer');
	if (closer) {
		closer.addEventListener('click', closeRegistrationModal);
	}
	
}

...

@charset "UTF-8";
body {
  margin: 0;
}

#memo-window {
	display: block;
	padding: 2px;
	width: 160px;
	background: rgb(221, 225, 240);
	border-radius: 10px;
	border: 1px solid black;
	z-index: 1;
}