[JAVA] full calendar 서버 및 UI 로직 입니다.

[JAVA] full calendar 서버 및 UI 로직 입니다..

build.gradle 에서 dependencies 합니다.

stap1

build.gradle
compile group: 'org.json', name: 'json', version: '20180813'

stap2

query.xml
<sql id="selectEvent">
    SELECT 
        E.EVENT_SEQ
        , E.SUBJECT
        , TO_CHAR(TO_DATE(E.START_DT, 'YYYYMMDD'), 'YYYY-MM-DD') S_DT
        , TO_CHAR(TO_DATE(E.END_DT, 'YYYYMMDD'), 'YYYY-MM-DD') E_DT
    FROM   EVENT_INFO E
    WHERE  E.DEL_YN = 'N'
</sql>

<select id="getEventList" parameterType="com.stoneitgt.sekm.user.domain.EventParameter"
        resultType="com.test.domain.LowerKeyMap">
    <include refid="selectEvent"></include>
    ORDER BY EVENT_SEQ
</select>

stap3

LowerKeyMap.java
public class LowerKeyMap extends HashMap<Object, Object> {
    private static final long serialVersionUID = 2244013042329551131L;

    public Object put(Object key, Object value) {
        return super.put(String.valueOf(key).toLowerCase(), value);
    }
}

stap4

Mapper.java
@Mapper
public interface Mapper {
    List<Map<String, Object>> getEventList(EventParameter params);
}

stap5

@Service
public class EventService extends BaseService {
    @Autowired
    private EventMapper eventMapper;

    public List<Map<String, Object>> getEventList(EventParameter params) {
        return eventMapper.getEventList(params);
    }
}

stap6

@Controller
@RequestMapping("/event")
public class EventController extends BaseController {
    @Autowired
    private EventService eventService;

    @GetMapping("/schedule")
    public String schedule(Model model, EventParameter eventParameter) {

        List<Map<String, Object>> list = eventService.getEventList(eventParameter);

        JSONObject obj =  new JSONObject();
        JSONArray jArray = new JSONArray();

        if(list.size() > 0) {
            for (int i = 0; i < list.size(); i++){
                JSONObject sObject = new JSONObject();

                sObject.put("title", list.get(i).get("subject"));
                sObject.put("start", list.get(i).get("s_dt"));
                sObject.put("end", list.get(i).get("e_dt"));
                sObject.put("groupId", list.get(i).get("event_seq"));
                sObject.put("url", "/test/schedule?field="+list.get(i).get("event_seq"));
                jArray.put(sObject);
            }
            obj.put("item", jArray);
        }

        model.addAttribute("list", obj);

        return "test/schedule";
    }
}

stap7

schedule.html
<div id="calendar"></div>
<th:block layout:fragment="custom_css">
    <link type="text/css" rel="stylesheet" th:href="@{/css/calendar/core/main.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/calendar/daygrid/main.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/calendar/list/main.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/calendar/timegrid/main.css}">
</th:block>
<th:block layout:fragment="custom_js">
    <script type="text/javascript" th:src="@{/js/calendar/core/main.js}"></script>
    <script type="text/javascript" th:src="@{/js/calendar/daygrid/main.js}"></script>
    <script type="text/javascript" th:src="@{/js/calendar/interaction/main.js}"></script>
    <script type="text/javascript" th:src="@{/js/calendar/list/main.js}"></script>
    <script type="text/javascript" th:src="@{/js/calendar/timegrid/main.js}"></script>

    <script type="text/javascript" >
        var jsonList = '[[${list}]]'
        var initday = '[[${info.s_dt}]]'
    </script>
    <script type="text/javascript" th:src="@{/js/event/schedule.js}"></script>
</th:block>

stap8

schedule.js
(function () {
    var jsonData = jsonList.replace(/"/g,'"');
    var jsonConvertList = JSON.parse(jsonData);
    var defaultDate = String.prototype.yyyy_mm_dd();

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            header: {
                left: 'prev,next today',
                //right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                right: 'title'
            },
            defaultDate: defaultDate,
            weekNumbers: true,
            weekNumbersWithinDays: true,
            weekNumberCalculation: 0,
            locale: 'ko',
            allDayDefault: false,
            editable: true,
            weekNumbers: false,
            eventLimit: true, // allow "more" link when too many events
            events: eval(JSON.stringify(jsonConvertList.item))
        });
        calendar.render();
    });
})();

stap9

common.js
String.prototype.yyyy_mm_dd = function() {
    var date = new Date();
    var d = date.getDate();
    var m = (date.getMonth()+1>9)?(date.getMonth()+1):'0'+(date.getMonth()+1);
    var y = date.getFullYear();
    var defaultDate = y+'-'+m+'-'+d;
    return defaultDate;
};

stap10

daygrid/main.css
.fc-sun { color:#c83636; }
.fc-sat { color:#2a81b8;  }

stap11

daygrid/main.js
html += core.buildGotoAnchorHtml(view, date, { 'class': 'fc-day-number' }, 
      dateEnv.format(date, DAY_NUM_FORMAT).replace("일","") // inner HTML