±¸±Û Ķ¸°´õ API ÀÚ¹Ù ¿¬µ¿ - Google calendar open source with java
±¸±Û Ķ¸°´õ API¸¦ ÀÚ¹Ù ±âÁØÀ¸·Î ÀÛ¼ºÇغ¸°Ú½À´Ï´Ù.
¸ñÂ÷
1. ±¸±ÛĶ¸°´õ API ¿¬µ¿
2. Controller±¸Çö
3. ȸ鱸Çö
4. ½ÇÇàȸé
1. ±¸±ÛĶ¸°´õ API ¿¬µ¿
¹Ø¿¡ google API ÄַܼΠµé¾î°©´Ï´Ù
https://console.developers.google.com/?hl=ko
ÇÁ·ÎÁ§Æ® ¸¸µé±â Ŭ¸¯
ÇÁ·ÎÁ§Æ®¸¦ ¸¸µé¾îÁÝ´Ï´Ù.
¶óÀ̺귯¸® -> Calendar API Ŭ¸¯
»ç¿ë ¼³Á¤ Ŭ¸¯
»ç¿ëÀÚ ÀÎÁõ Á¤º¸ ¸¸µé±â Ŭ¸¯
java·Î ±¸ÇöÇϱ⶧¹®¿¡ À¥¼¹ö -> ¾ÖÇø®ÄÉÀÌ¼Ç µ¥ÀÌÅÍ -> ¾Æ´Ï¿ä -> »ç¿ëÀÚ ÀÎÁ¤ Á¤º¸ Ŭ¸¯
¼ºñ½º °èÁ¤ À̸§Àº ¾Æ¹«°Å³ª Àû°í -> ¿ªÇÒµµ Àû´çÈ÷ ¼³Á¤ -> Å° À¯Çü JSON üũ -> °è¼Ó
»ç¿ëÀÚ µ¿ÀÇȸéÀ» Á¤ÇØÁÝ´Ï´Ù. -> ÀúÀåŬ¸¯
»ç¿ëÀÚ ÀÎÁõ Á¤º¸ ¸¸µé±â -> OAuth Ŭ¶óÀ̾ðÆ® ID Ŭ¸¯
±âŸÀ¯Çü -> »ý¼º
Á¢¼ÓÁ¤º¸ JSONÀ» ´Ù¿î ¹Þ½À´Ï´Ù.
ÆÄÀϸíÀ» º¯°æ
client_secret.json
src/main/resources °æ·Î¿¡ ³Ö¾îÁÝ´Ï´Ù.
dependency
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- google api --> <dependency> <groupId>com.google.api-client</groupId> <artifactId>google-api-client</artifactId> <version>1.22.0</version> </dependency>
<dependency> <groupId>com.google.oauth-client</groupId> <artifactId>google-oauth-client-jetty</artifactId> <version>1.22.0</version> </dependency>
<dependency> <groupId>com.google.apis</groupId> <artifactId>google-api-services-calendar</artifactId> <version>v3-rev235-1.22.0</version> </dependency> | cs |
java·Î Á¢¼ÓÇÒ °´Ã¼¸¦ ¸¸µé¾îÁÝ´Ï´Ù.
GoogleCalendarService.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | package com.t.hc.beans;
import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.util.Arrays; import java.util.List;
import com.google.api.client.auth.oauth2.Credential; import com.google.api.client.extensions.java6.auth.oauth2.AuthorizationCodeInstalledApp; import com.google.api.client.extensions.jetty.auth.oauth2.LocalServerReceiver; import com.google.api.client.googleapis.auth.oauth2.GoogleAuthorizationCodeFlow; import com.google.api.client.googleapis.auth.oauth2.GoogleClientSecrets; import com.google.api.client.googleapis.javanet.GoogleNetHttpTransport; import com.google.api.client.http.HttpTransport; import com.google.api.client.json.JsonFactory; import com.google.api.client.json.jackson2.JacksonFactory; import com.google.api.client.util.store.FileDataStoreFactory; import com.google.api.services.calendar.Calendar; import com.google.api.services.calendar.CalendarScopes; //import com.google.api.services.calendar.model.CalendarList; //import com.google.api.services.calendar.model.CalendarListEntry;
public class GoogleCalendarService {
private static final String APPLICATION_NAME = "Google Calendar API Java Quickstart";
private static final java.io.File DATA_STORE_DIR = new java.io.File( System.getProperty("user.home"), ".credentials/calendar-java-quickstart");
private static FileDataStoreFactory DATA_STORE_FACTORY;
private static final JsonFactory JSON_FACTORY = JacksonFactory .getDefaultInstance();
private static HttpTransport HTTP_TRANSPORT;
private static final List<String> SCOPES = Arrays .asList(CalendarScopes.CALENDAR);
static { try { HTTP_TRANSPORT = GoogleNetHttpTransport.newTrustedTransport(); DATA_STORE_FACTORY = new FileDataStoreFactory(DATA_STORE_DIR); } catch (Throwable t) { t.printStackTrace(); System.exit(1); } }
public static Credential authorize() throws IOException { InputStream in = GoogleCalendarService.class .getResourceAsStream("/client_secret.json"); GoogleClientSecrets clientSecrets = GoogleClientSecrets.load( JSON_FACTORY, new InputStreamReader(in));
GoogleAuthorizationCodeFlow flow = new GoogleAuthorizationCodeFlow.Builder( HTTP_TRANSPORT, JSON_FACTORY, clientSecrets, SCOPES) .setDataStoreFactory(DATA_STORE_FACTORY) .setAccessType("offline").build(); Credential credential = new AuthorizationCodeInstalledApp(flow, new LocalServerReceiver()).authorize("user"); System.out.println("Credentials saved to " + DATA_STORE_DIR.getAbsolutePath()); return credential; }
public static Calendar getCalendarService() throws IOException { Credential credential = authorize(); return new Calendar.Builder(HTTP_TRANSPORT, JSON_FACTORY, credential) .setApplicationName(APPLICATION_NAME).build(); }
// public static void main(String[] args) throws IOException { // com.google.api.services.calendar.Calendar service = getCalendarService(); // // Ķ¸°´õ Á¶È¸ // String pageToken = null; // do { // CalendarList calendarList = service.calendarList().list().setPageToken(pageToken).execute(); // List<CalendarListEntry> items1 = calendarList.getItems(); // // for (CalendarListEntry calendarListEntry : items1) { // System.out.println(calendarListEntry.getSummary()); // System.out.println(calendarListEntry.getId()); // } // pageToken = calendarList.getNextPageToken(); // } while (pageToken != null); // } } | cs |
Á¢¼Ó Å×½ºÆ®¸¦À§ÇØ main¸Þ¼Òµå¸¦ µ¹·Áº¾´Ï´Ù.
¼º°øÀûÀ¸·Î ¼öÇàµÇ¸é ÃÖÃÊÈ£Ãâ½Ã ±ÇÇÑ¿äû ºê¶ó¿ìÀú âÀÌ ¶ä´Ï´Ù.
¼º°øÀûÀ¸·Î calendar ¸ñ·Ïµ¥ÀÌÅ͸¦ °¡Á®¿Â°É º¼¼öÀÖ½À´Ï´Ù.
CalendarDto.java ÀÛ¼º
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | package com.t.hc.dto;
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date;
public class CalendarDto {
private String summary; private String startDate; private String startTime; private String endDate; private String endTime; private String description; private String eventId; private String calendarId;
{ description = ""; }
public CalendarDto() {}
public Date getStartDateTime() throws ParseException { SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-ddHH:mm"); return format.parse(startDate+startTime); } public Date getEndDateTime() throws ParseException { SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-ddHH:mm"); return format.parse(endDate+endTime); }
public String getSummary() { return summary; } public void setSummary(String summary) { this.summary = summary; } public String getStartDate() { return startDate; } public void setStartDate(String startDate) { this.startDate = startDate; } public String getStartTime() { return startTime; } public void setStartTime(String startTime) { this.startTime = startTime; } public String getEndDate() { return endDate; } public void setEndDate(String endDate) { this.endDate = endDate; } public String getEndTime() { return endTime; } public void setEndTime(String endTime) { this.endTime = endTime; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public String getEventId() { return eventId; } public void setEventId(String eventId) { this.eventId = eventId; } public String getCalendarId() { return calendarId; } public void setCalendarId(String calendarId) { this.calendarId = calendarId; }
@Override public String toString() { return "GoogleCalendarDto [summary=" + summary + ", startDate=" + startDate + ", startTime=" + startTime + ", endDate=" + endDate + ", endTime=" + endTime + ", description=" + description + ", eventId=" + eventId + ", calendarId=" + calendarId + "]"; } } | cs |
2. Controller±¸Çö
Ķ¸°´õ ¸®½ºÆ® Controller ÀÛ¼º
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | package com.t.hc;
import java.io.IOException; import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod;
import com.google.api.services.calendar.Calendar; import com.google.api.services.calendar.model.CalendarList; import com.google.api.services.calendar.model.CalendarListEntry; import com.t.hc.beans.GoogleCalendarService; import com.t.hc.dto.CalendarDto;
@Controller public class HandcodingController {
private Logger logger = LoggerFactory.getLogger(HandcodingController.class);
// Ķ¸°´õ¸®½ºÆ® @RequestMapping(value="/coding.do", method=RequestMethod.GET) public String coding(Model model) { logger.info("calendarList"); try { Calendar service = GoogleCalendarService.getCalendarService(); CalendarList calendarList = service.calendarList().list().setPageToken(null).execute(); List<CalendarListEntry> items = calendarList.getItems(); model.addAttribute("items", items); } catch (IOException e) { e.printStackTrace(); } return "coding"; }
// Ķ¸°´õ »ý¼º ó¸® @RequestMapping(value="/calendarAdd.do", method=RequestMethod.POST) public String calendarAdd(CalendarDto calDto) { logger.info("calendarAdd "+calDto.toString());
try { Calendar service = GoogleCalendarService.getCalendarService(); com.google.api.services.calendar.model.Calendar calendar = new com.google.api.services.calendar.model.Calendar(); calendar.setSummary(calDto.getSummary()); calendar.setTimeZone("America/Los_Angeles"); service.calendars().insert(calendar).execute(); } catch (IOException e) { e.printStackTrace(); } return "redirect:/coding.do"; }
// Ķ¸°´õ »èÁ¦ ó¸® @RequestMapping(value="/calendarRemove.do", method=RequestMethod.POST) public String calendarRemove(HttpServletRequest req) { logger.info("calendarRemove");
String[] chkVal = req.getParameterValues("chkVal"); try { Calendar service = GoogleCalendarService.getCalendarService(); for (String calendarId : chkVal) { service.calendars().delete(calendarId).execute(); } } catch (IOException e) { e.printStackTrace(); } return "redirect:/coding.do"; }
// Ķ¸°´õ ¼öÁ¤ ó¸® @RequestMapping(value="/calendarModify.do", method=RequestMethod.POST) public String calendarModify(CalendarDto calDto) { logger.info("calendarModify "+calDto.toString());
try { Calendar service = GoogleCalendarService.getCalendarService(); com.google.api.services.calendar.model.Calendar calendar = service.calendars().get(calDto.getCalendarId()).execute(); calendar.setSummary(calDto.getSummary()); service.calendars().update(calendar.getId(), calendar).execute(); } catch (IOException e) { e.printStackTrace(); } return "redirect:/coding.do"; }
// Ķ¸°´õ À̵¿Ã³¸® @RequestMapping(value="/schdule.do", method=RequestMethod.GET) public String schdule(Model model, String calendarId, String title) { logger.info("schdule"); model.addAttribute("calendarId", calendarId); model.addAttribute("title", title); return "schdule"; } }
| cs |
ÀÏÁ¤À̺¥Æ® Çڵ鸵ÇÒ ajaxÄÁÆ®·Ñ·¯ ÀÛ¼º
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | package com.t.hc;
import java.io.IOException; import java.text.ParseException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController;
import com.google.api.client.util.DateTime; import com.google.api.services.calendar.Calendar; import com.google.api.services.calendar.model.Event; import com.google.api.services.calendar.model.EventDateTime; import com.google.api.services.calendar.model.Events; import com.t.hc.beans.GoogleCalendarService; import com.t.hc.dto.CalendarDto;
@RestController public class CalendarAjaxController {
private Logger logger = LoggerFactory.getLogger(CalendarAjaxController.class);
// ÀÏÁ¤ µ¥ÀÌÅÍ Ã³¸® @RequestMapping(value="/calendarEventList.do", method=RequestMethod.POST) public List<Event> calendarEventList(CalendarDto calDto) { logger.info("calendarEventList "+calDto.toString());
List<Event> items = new ArrayList<Event>(); try { com.google.api.services.calendar.Calendar service = GoogleCalendarService.getCalendarService(); Events events = service.events().list(calDto.getCalendarId()).setOrderBy("startTime").setSingleEvents(true).execute(); items = events.getItems(); } catch (IOException e) { e.printStackTrace(); } return items; }
// ÀÏÁ¤ ÀúÀå ó¸® @RequestMapping(value="/calendarEventAdd.do", method=RequestMethod.POST) public Map<String, Boolean> calendarEventAdd(CalendarDto calDto) { logger.info("calendarEventAdd "+calDto.toString());
boolean isc = false; try { Calendar service = GoogleCalendarService.getCalendarService(); Event event = new Event().setSummary(calDto.getSummary()).setDescription(calDto.getDescription()); //½ÃÀÛÀÏ DateTime startDateTime = new DateTime(calDto.getStartDateTime()); EventDateTime start = new EventDateTime().setDateTime(startDateTime).setTimeZone("America/Los_Angeles"); event.setStart(start); //Á¾·áÀÏ DateTime endDateTime = new DateTime(calDto.getEndDateTime()); EventDateTime end = new EventDateTime().setDateTime(endDateTime).setTimeZone("America/Los_Angeles"); event.setEnd(end); event = service.events().insert(calDto.getCalendarId(), event).execute(); isc = true; } catch (IOException | ParseException e) { e.printStackTrace(); } Map<String, Boolean> map = new HashMap<String, Boolean>(); map.put("isc", isc); return map; }
// ÀÏÁ¤ »èÁ¦ @RequestMapping(value="/calendarEventRemoveOne.do", method=RequestMethod.POST) public Map<String, Boolean> calendarEventRemoveOne(CalendarDto calDto) { logger.info("calendarEventRemoveOne "+calDto.toString());
boolean isc = false; try { Calendar service = GoogleCalendarService.getCalendarService(); service.events().delete(calDto.getCalendarId(), calDto.getEventId()).execute(); isc = true; } catch (IOException e) { e.printStackTrace(); } Map<String, Boolean> map = new HashMap<String, Boolean>(); map.put("isc", isc); return map; }
// ÀÏÁ¤ ¼öÁ¤ @RequestMapping(value="/calendarEventModify.do", method=RequestMethod.POST) public Map<String, Boolean> calendarEventModify(CalendarDto calDto) { logger.info("calendarEventModify "+calDto.toString());
boolean isc = false; try { Calendar service = GoogleCalendarService.getCalendarService(); Event event = service.events().get(calDto.getCalendarId(), calDto.getEventId()).execute(); event.setSummary(calDto.getSummary()).setDescription(calDto.getDescription()); service.events().update(calDto.getCalendarId(), event.getId(), event).execute(); isc = true; } catch (IOException e) { e.printStackTrace(); } Map<String, Boolean> map = new HashMap<String, Boolean>(); map.put("isc", isc); return map; } } | cs |
3. ȸ鱸Çö
Ķ¸°´õ ¸®½ºÆ®È¸é
coding.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ķ¸°´õ °ü¸®</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> <script type="text/javascript" src='./js/sweetalert.min.js?ver=1'></script> <link rel="stylesheet" type="text/css" href='./css/sweetalert.css?ver=1.2'> <script type="text/javascript" src="./js/calendarList.js"></script> </head> <body> <form action="./calendarRemove.do" method="post" id="frmCalendarRemove"> <table class="table table-bordered"> <tr> <th><input type='checkbox' onclick='checkAllDel(this.checked)' />Àüü</th> <th>Ķ¸°´õÀ̸§</th> <th>Ķ¸°´õÄÚµå</th> </tr> <c:forEach items="${items}" var="item"> <tr> <td><input type='checkbox' name='chkVal' value="${item.id}" /></td> <td><input type="hidden" name='summarys' value="${item.summary}" /> <a href="./schdule.do?calendarId=${item.id}&title=${item.summary}">${item.summary}</a> </td> <td>${item.id}</td> </tr> </c:forEach> </table> </form> <input type="button" class='btn btn-sm btn-warning' value="Ķ¸°´õ »ý¼º" onclick="calendarAddForm()" /> <input type="button" class='btn btn-sm btn-warning' value="Ķ¸°´õ ¼öÁ¤" onclick="calendarModifyForm()" /> <input type="button" class='btn btn-sm btn-warning' value="Ķ¸°´õ »èÁ¦" onclick="calendarRemove()" /> <!-- Ķ¸°´õ »ý¼º modal --> <div class="modal fade" id="calendarAddForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">¡¿</button> <h4 class="modal-title">Ķ¸°´õ »ý¼º</h4> </div> <div class="modal-body"> <!-- Ķ¸°´õ »ý¼ºÃ³¸® form --> <form action="./calendarAdd.do" method='post' id='frmCalendarAdd'> <div class='form-group'> <label>Ķ¸°´õÀ̸§</label><input class='form-control' type="text" name='summary' id='summary' /> </div> <div class='modal-footer'> <input type="button" class='btn btn-sm btn-warning' value="È®ÀÎ" onclick="calendarAdd()" /> <input type="reset" class='btn btn-sm btn-warning' value="ÃʱâÈ" /> <input type='button' class='btn btn-sm btn-warning' data-dismiss='modal' value="Ãë¼Ò" /> </div> </form> </div> </div> </div> </div> <!-- Ķ¸°´õ ¼öÁ¤ modal --> <div class="modal fade" id="calendarModifyForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">¡¿</button> <h4 class="modal-title">Ķ¸°´õ ¼öÁ¤</h4> </div> <div class="modal-body"> <!-- Ķ¸°´õ »ý¼ºÃ³¸® form --> <form action="./calendarModify.do" method='post' id='frmCalendarModify'> <div class='form-group'> <label>Ķ¸°´õÀ̸§</label><input class='form-control' type="text" name='summary' id='summaryModify' /> </div> <input type="hidden" name="calendarId" id='calendarIdModify' /> <div class='modal-footer'> <input type="button" class='btn btn-sm btn-warning' value="È®ÀÎ" onclick="calendarModify()" /> <input type="reset" class='btn btn-sm btn-warning' value="ÃʱâÈ" /> <input type='button' class='btn btn-sm btn-warning' data-dismiss='modal' value="Ãë¼Ò" /> </div> </form> </div> </div> </div> </div> </body> </html> | cs |
Ķ¸°´õ ÀÏÁ¤È¸é
schdule.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ÀÏÁ¤°ü¸®</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> <script type="text/javascript" src='./js/sweetalert.min.js?ver=1'></script> <link rel="stylesheet" type="text/css" href='./css/sweetalert.css?ver=1.2'> <script type="text/javascript" src="./js/stringBuffer.js"></script> <script type="text/javascript" src="./js/calendar.js"></script> <script type="text/javascript" src="./js/calendarSchdule.js"></script> <style type="text/css"> thead { text-align: center; } thead td { width: 100px; } #tbody td { height: 150px; } #yearMonth { font: bold; font-size: 18px; } </style> </head> <body> <input type="hidden" id="chk" value="0" /> <input type="hidden" id="calendarId" value="${calendarId}" /> <table class="table table-bordered"> <thead id='thead'> <tr> <td colspan="7"> <button type='button' class='btn btn-sm btn-warning' id='moveFastPre' onclick="moveFastMonthPre()">«</button>
<button type='button' class='btn btn-sm btn-warning' id='movePre' onclick="moveMonthPre()">‹</button> <span id='yearMonth'></span> <button type='button' class='btn btn-sm btn-warning' id='moveNext' onclick="moveMonthNext()">›</button> <button type='button' class='btn btn-sm btn-warning' id='moveFastNext' onclick="moveFastMonthNext()">»</button> <div style="text-align: right;"> <span>${title}</span> <input class='btn btn-sm btn-info' type="button" value="ÁÖ" onclick='tabWeek()' /> <input class='btn btn-sm btn-info' type="button" value="¿ù" onclick='tabMonth()' /> <input class='btn btn-sm btn-info' type="button" value="¸ñ·Ï" onclick='location.href="./coding.do"' /> </div> </td> </tr> <tr> <td>ÀÏ<span class='week'></span></td> <td>¿ù<span class='week'></span></td> <td>È<span class='week'></span></td> <td>¼ö<span class='week'></span></td> <td>¸ñ<span class='week'></span></td> <td>±Ý<span class='week'></span></td> <td>Åä<span class='week'></span></td> </tr> </thead> <tbody id='tbody'></tbody> </table> <!-- ÀÏÁ¤ »ý¼º modal --> <div class="modal fade" id="schduleForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">¡¿</button> <h4 class="modal-title">ÀÏÁ¤µî·Ï</h4> </div> <div class="modal-body"> <form class='form-margin40' role='form' action="#" method='post' id='frmSchdule'> <div class='form-group'> <label>Á¦¸ñ</label> <input type='text' class='form-control' id='summary' name='summary' placeholder="¿¹: ¿ÀÈÄ 7½Ã¿¡ ¸ß½ÃÄÚ À½½ÄÁ¡¿¡¼ Àú³á½Ä»ç"> </div> <div class='form-group'> <label>½ÃÀ۽ð£</label> <input class='form-control' type="time" id='startTime' name='startTime'> </div> <div class='form-group'> <label>½ÃÀÛ³¯Â¥</label> <input class='form-control startDate' type="date" id='startDate' name='startDate' readonly="readonly"> </div> <div class='form-group'> <label>Á¾·á½Ã°£</label> <input class='form-control' type="time" id='endTime' name='endTime'> </div> <div class='form-group'> <label>Á¾·á³¯Â¥</label> <input class='form-control startDate' type="date" id='endDate' name='endDate'> </div> <div class='form-group'> <label>³»¿ë</label> <textarea rows="7" class='form-control' id="description" name='description'></textarea> </div> <div class='modal-footer'> <input type="button" class='btn btn-sm btn-warning' value="È®ÀÎ" onclick="calendarSchduleAdd()" /> <input type="reset" class='btn btn-sm btn-warning' value="ÃʱâÈ" /> <input type='button' class='btn btn-sm btn-warning' data-dismiss='modal' value="Ãë¼Ò" /> </div> </form> </div> </div> </div> </div> <!-- ÀÏÁ¤ ¼öÁ¤ modal --> <div class="modal fade" id="schduleFormModify" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">¡¿</button> <h4 class="modal-title">ÀÏÁ¤¼öÁ¤</h4> </div> <div class="modal-body"> <form class='form-margin40' role='form' action="#" method='post' id='frmSchduleModify'> <div class='form-group'> <label>Á¦¸ñ</label> <input type='text' class='form-control' id='modifySummary' name='summary'> </div> <div class='form-group'> <label>³»¿ë</label> <textarea rows="7" class='form-control' id="modifyDescription" name='description'></textarea> </div> <input type="hidden" id="modifyEventId" name="eventId" /> <input type="hidden" name="calendarId" value="${calendarId}" /> <div class='modal-footer'> <input type="button" class='btn btn-sm btn-warning' value="È®ÀÎ" onclick="modifyEvent()" /> <input type="reset" class='btn btn-sm btn-warning' value="ÃʱâÈ" /> <input type='button' class='btn btn-sm btn-warning' data-dismiss='modal' value="Ãë¼Ò" /> </div> </form> </div> </div> </div> </div> </body> </html> | cs |
È¸é ¶óÀ̺귯¸®´Â ºÎÆ®½ºÆ®·¦, jQuery, sweetalertÀ» ¾¹´Ï´Ù.
±âŸ util javaScript
stringBuffer.js
1 2 3 4 5 6 7 8 9 10 | // StringBuffer var StringBuffer = function() { this.buffer = new Array(); }; StringBuffer.prototype.append = function(str) { this.buffer[this.buffer.length] = str; }; StringBuffer.prototype.toString = function() { return this.buffer.join(""); }; | cs |
´Þ·Â¿¬»ê°´Ã¼¸¦ Çϳª ¸¸µé¾îÁÝ´Ï´Ù.
calendar.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | // Ķ¸°´õ °´Ã¼ var calendar = { LEAF : [ 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ], //À±³â PLAIN : [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ], //Æò³â iscLeafCheck : //À±³â ÆÇ´Ü function(year) { var isc = false; if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { // À±³âÀ̸é isc = true; } return isc; }, daysY : //³âµµ¿¡ µû¸¥ Àϼö ´©Àû function(year) { var daySum = 0; for (var i = 1; i < year; i++) { if (this.iscLeafCheck(i)) { daySum += 366; } else { daySum += 365; } } return daySum; }, daysM : //³âµµ´©Àû + ¿ù Àϼö ´©Àû function(year, month) { var daySum = this.daysY(year); for (var i = 1; i < month; i++) { daySum += this.PLAIN[i - 1]; } if (month >= 2 && this.iscLeafCheck(year)) { daySum++; } return daySum; }, daysD : //³âµµ´©Àû + ¿ù ´©Àû + Àϼö ´©Àû function(year, month, day) { return this.daysM(year, month) + day; }, lastDay : // ±¸ÇÏ°íÀÚ ÇÏ´Â ³â¿ùÀÇ ÃÖ´ë Àϼö function(year, month) { var last_day = 0; if (this.iscLeafCheck(year)) { last_day = this.LEAF[month - 1]; } else { last_day = this.PLAIN[month - 1]; } return last_day; }, isBeforeDays : // ¾ÕÀÇ ´Þ¿¡ ³âµµ ºÐ±â function(year, month) { var days = 0; if (month == 1) { days = this.lastDay(year - 1, 12); } else { days = this.lastDay(year, month - 1); } return days; }, make : // ÇØ´ç´Þ·ÂÀ» ¹è¿·Î ¹Ýȯ function(year, month) { var dateOfWeek = (this.daysD(year, month, 1)) % 7; var beforeLastDay = this.isBeforeDays(year, month); var startLastDay = beforeLastDay - dateOfWeek + 1; var last_day = this.lastDay(year, month); // ±¸ÇÏ°íÀÚ ÇÏ´Â ³â¿ùÀÇ ÃÖ´ë Àϼö var lastWeekDays = (7 - (dateOfWeek + last_day) % 7) % 7; if (this.iscLeafCheck(year)) { startLastDay++; lastWeekDays++; } var dayArray = new Array(); var cnt = 0; for (var i = startLastDay; i <= beforeLastDay; i++, cnt++) { dayArray[cnt] = i; } for (var i = 1; i <= last_day; i++, cnt++) { dayArray[cnt] = i; } for (var i = 1; i <= lastWeekDays; i++, cnt++) { dayArray[cnt] = i; } return dayArray; }, makeOne : // ´Þ·Â ÇÑ°³¸¸ function(year, month){ var last_day = this.lastDay(year, month); // ±¸ÇÏ°íÀÚ ÇÏ´Â ³â¿ùÀÇ ÃÖ´ë Àϼö var dayArray = new Array(); var cnt = 0; for (var i = 1; i <= last_day; i++, cnt++) { dayArray[cnt] = i; } return dayArray; } } | cs |
Ķ¸°´õ ¸®½ºÆ® ȸéÀ» Çڵ鸵ÇÒ javaScript
calendarList.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | // Ķ¸°´õ »ý¼ºÆû È£Ãâ function calendarAddForm() { $('#calendarAddForm').modal(); } // Ķ¸°´õ »ý¼º ó¸® function calendarAdd() { var summary = $('#summary').val(); if(summary.trim() == '' || summary.trim().length == 0) { swal('À̸§','ÀÔ·ÂÇØÁÖ¼¼¿ä'); return false; } $('#frmCalendarAdd').submit(); } //Àüüüũ function checkAllDel(bool) { var chkVal = document.getElementsByName("chkVal"); for (var i = 0; i < chkVal.length; i++) { chkVal[i].checked = bool; } } //Ķ¸°´õ »èÁ¦ function calendarRemove() { var chkVal = document.getElementsByName("chkVal"); var n = 0; for (var i = 0; i < chkVal.length; i++) { if(chkVal[i].checked == true){ n++; } } if(n>0){ $('#frmCalendarRemove').submit(); }else { swal("Ķ¸°´õ »èÁ¦", '¼±ÅÃÇØÁÖ¼¼¿ä'); } } // Ķ¸°´õ ¼öÁ¤ È£Ãâ function calendarModifyForm() { var chkVal = document.getElementsByName("chkVal"); var summarys = document.getElementsByName("summarys"); var n = 0; var calendarId = ''; var summary = ''; for (var i = 0; i < chkVal.length; i++) { if(chkVal[i].checked == true){ n++; calendarId = chkVal[i].value; summary = summarys[i].value; } } if(n==1) { $('#frmCalendarModify').find('#summaryModify').val(summary); $('#frmCalendarModify').find('#calendarIdModify').val(calendarId); }else if(n>1) { swal("Ķ¸°´õ ¼öÁ¤", '1°³¸¸ ¼±ÅÃÇØÁÖ¼¼¿ä'); return false; }else { swal("Ķ¸°´õ ¼öÁ¤", '¼±ÅÃÇØÁÖ¼¼¿ä'); return false; } $('#calendarModifyForm').modal(); } // Ķ¸°´õ ¼öÁ¤ ó¸® function calendarModify() { $('#frmCalendarModify').submit(); }
| cs |
ÀÏÁ¤À» Çڵ鸵ÇÒ js
calendarSchdule.js
var data = {} // List<Event> var locationMonth = 0; // ÇöÀç ´Þ·ÂÀ§Ä¡ var locationYear = 0; // ÇöÀç ³âµµÀ§Ä¡ var locationWeek = 0; // ÇöÀç ÁÖÂ÷À§Ä¡ // ³¯Â¥ Åױ׸¦ ¸¸µé¾îÁØ´Ù function dayTagFormat(year, month, day) { var tag = new StringBuffer(); tag.append("<td id="+year+month+day+">"); tag.append("<a onclick='schduleAdd("+year+","+month+","+day+")'>"+numFormat(day)+"</a>"); tag.append("</td>"); return tag.toString(); } //¼ýÀÚ 5 -> 05 º¯°æ function numFormat(num) { var str = ''+num; if(num<10 && str.indexOf('0') == -1 || str.length == 1) { str = '0'+num; } return str; } // ½Ã°£À» ¸®ÅÏÇÑ´Ù function getTime(item) { return numFormat(item.getHours()) + ":" + numFormat(item.getMinutes()); } // ÀÏÁ¤Ãß°¡ Æû function schduleAdd(year, month, day) { $('.startDate').val(year + "-" + numFormat(month) + "-" + numFormat(day)); $('#summary').val(''); $('#startTime').val(''); $('#endTime').val(''); $('#description').val(''); $('#schduleForm').modal(); } // À¯È¿¼º °Ë»ç ÀÏÁ¤ ÀúÀåó¸® function calendarSchduleAdd() { var summary = $('#summary').val(); var startTime = $('#startTime').val().split(":"); var endTime = $('#endTime').val().split(":"); if(summary.trim() == '' || summary.trim().length == 0) { swal('Á¦¸ñ','ÀÔ·ÂÇØÁÖ¼¼¿ä'); return false; }else if($('#startTime').val() == '') { swal('½ÃÀ۽ð£','ÀÔ·ÂÇØÁÖ¼¼¿ä'); return false; }else if($('#endTime').val() == '') { swal('Á¾·á½Ã°£','ÀÔ·ÂÇØÁÖ¼¼¿ä'); return false; }else if(new Date(0,0,0,endTime[0],endTime[1]).getTime() - new Date(0,0,0,startTime[0],startTime[1]).getTime() < 0) { swal('½Ã°£','Á¾·á½Ã°£ÀÌ ½ÃÀ۽𣺸´Ù ´Ê½À´Ï´Ù'); return false; }else if($('#endDate').val() == '') { swal('Á¾·á³¯Â¥','ÀÔ·ÂÇØÁÖ¼¼¿ä'); return false; }else if(new Date($('#endDate').val()).getTime() - new Date($('#startDate').val()).getTime() < 0) { swal('³¯Â¥','Á¾·áÀÏÀÌ ½ÃÀÛÀϺ¸´Ù ´Ê½À´Ï´Ù'); return false; } $("#schduleForm").modal('hide'); swal('calendar', 'googleÅäÅ«ÀÌ ÇÊ¿äÇÕ´Ï´Ù.'); $.ajax({ url: './calendarEventAdd.do', type: 'post', async: false, data : $('#frmSchdule').serialize(), success: function(msg) { if(msg.isc) { swal('ÀúÀå', '¼º°øÇÏ¿´½À´Ï´Ù'); }else { swal('ÀúÀå', '½ÇÆÐÇÏ¿´½À´Ï´Ù'); } } }); calendarEventList(); screenWriteMonth(); } //´Þ·ÂÀÇ ÇØ´ç ³¯Â¥ÀÇ ¿äÀÏÀ» ±¸ÇϱâÀ§ÇØ ÇöÀçÀ§Ä¡ ¹Ýȯ function monthDayIndex(month, day) { for(var i=0; i<month.length; i++) { if(month[i]==day) { return i; } } } // ´Þ·Â ÀÌÀüÀ¸·Î À̵¿ function moveMonthPre() { locationMonth--; screenWriteMonth(); } // ´Þ·Â ´ÙÀ½À¸·Î À̵¿ function moveMonthNext() { locationMonth++; screenWriteMonth(); } // ´Þ·Â ÀÌÀü ³âµµ·Î À̵¿ function moveFastMonthPre() { locationYear--; screenWriteMonth(); } // ´Þ·Â ´ÙÀ½ ³âµµ·Î À̵¿ function moveFastMonthNext() { locationYear++; screenWriteMonth(); } // ȸ鿡 ´Þ·Â°ú À̺¥Æ®¸¦ ±×·ÁÁØ´Ù function screenWriteMonth() { var date = new Date(); var month = date.getMonth()+1+locationMonth; if(month == 0) { locationYear--; locationMonth = 12 - Math.abs(locationMonth); month = date.getMonth()+1+locationMonth; }else if(month == 13) { locationYear++; locationMonth = locationMonth - 12; month = date.getMonth()+1+locationMonth; } var months = [month-1, month, month+1]; if(month == 1) { months = [12, month, month+1]; }else if(month == 12) { months = [month-1, month, 1]; } var year = date.getFullYear()+locationYear; var monthDay = calendar.make(year, months[1]); var tag = new StringBuffer(); var startIndex = monthDayIndex(monthDay, 1); var lastIndex = monthDayIndex(calendar.makeOne(year, months[1]), calendar.lastDay(year, months[1])) + startIndex; for(var i=0; i<monthDay.length; i++) { if(i%7 == 0) { tag.append('<tr>'); } if(i<startIndex) { if(months[0]==12) { tag.append(dayTagFormat(year-1, months[0], monthDay[i])); }else { tag.append(dayTagFormat(year, months[0], monthDay[i])); } }else if(i <= lastIndex) { tag.append(dayTagFormat(year, months[1], monthDay[i])); }else { if(months[2]==1) { tag.append(dayTagFormat(year+1, months[2], monthDay[i])); }else { tag.append(dayTagFormat(year, months[2], monthDay[i])); } } if(i%7 == 6) { tag.append('</tr>'); } } $('#tbody').html(tag.toString()); $('#yearMonth').text(year + "³â " + numFormat(months[1]) + "¿ù"); if(data.chk) { for(var i=0; i<data.cnt; i++) { var itemMonth = data.start[i].getMonth()+1; var itemYear = data.start[i].getFullYear(); if((itemMonth == months[1] || itemMonth == months[0] || itemMonth == months[2]) && (itemYear == year || itemYear == year-1 || itemYear == year+1)) { $('#'+itemYear+itemMonth+data.start[i].getDate()).append(eventTagFormat(getTime(data.start[i]), data.title[i], data.eventId[i], data.description[i])); } } } } // ÀÏÁ¤ ű׸¦ ¸¸µé¾î ÁØ´Ù function eventTagFormat(time, title, eventId, description) { var tag = new StringBuffer(); tag.append("<p>"); tag.append('<a data-toggle="collapse" data-target="#collapseExample'+eventId+'" aria-expanded="false" aria-controls="collapseExample" onclick="collapse(\''+eventId+'\')">'); tag.append(time+" "+title); tag.append('</a>'); tag.append('<div class="collapse" id="collapseExample'+eventId+'">'); if(description == null) { tag.append('<div class="well">³»¿ëÀÌ ¾ø½À´Ï´Ù</div>'); }else { tag.append('<div class="well">'+description+'</div>'); } tag.append('<div style="text-align: right;"><input type="button" class="btn btn-sm btn-warning" value="¼öÁ¤" onclick="modifyEventModal(\''+title+'\',\''+eventId+'\',\''+description+'\')"/> '); tag.append('<input type="button" class="btn btn-sm btn-warning" value="»èÁ¦" onclick="removeEventOne(\''+eventId+'\')"/></div>'); tag.append('</div>'); tag.append("</p>"); return tag.toString(); } // collapse ó¸® function collapse(eventId) { $('.collapse').not('#collapseExample'+eventId).each(function(){ $(this).attr('class', 'collapse collapse'); }); } // ÀÏÁ¤¼öÁ¤ modal function modifyEventModal(title, eventId, description) { $('#modifySummary').val(title); if(description != 'undefined') { $('#modifyDescription').val(description); }else { $('#modifyDescription').val(''); } $('#modifyEventId').val(eventId); $('#schduleFormModify').modal(); } // ÀÏÁ¤¼öÁ¤ ó¸® function modifyEvent() { var summary = $('#modifySummary').val(); if(summary.trim() == '' || summary.trim().length == 0) { swal('Á¦¸ñ','ÀÔ·ÂÇØÁÖ¼¼¿ä'); return false; } $("#schduleFormModify").modal('hide'); $.ajax({ url: './calendarEventModify.do', type: 'post', async: false, data: $('#frmSchduleModify').serialize(), success: function(msg) { if(msg.isc) { swal('¼öÁ¤', '¼º°øÇÏ¿´½À´Ï´Ù'); }else { swal('¼öÁ¤', '½ÇÆÐÇÏ¿´½À´Ï´Ù'); } } }); calendarEventList(); if($('#chk').val() == '1') { screenWriteWeek(); }else { screenWriteMonth(); } } // ÀÏÁ¤»èÁ¦ function removeEventOne(eventId) { $.ajax({ url: './calendarEventRemoveOne.do', type: 'post', async: false, data : { "eventId" : eventId, "calendarId" : $('#calendarId').val() }, success: function(msg) { if(msg.isc) { swal('»èÁ¦', '¼º°øÇÏ¿´½À´Ï´Ù'); }else { swal('»èÁ¦', '½ÇÆÐÇÏ¿´½À´Ï´Ù'); } } }); calendarEventList(); if($('#chk').val() == '1') { screenWriteWeek(); }else { screenWriteMonth(); } } // ajax·Î À̺¥Æ® µ¥ÀÌÅ͸¦ ¹Þ´Â´Ù function calendarEventList() { $.ajax({ url: './calendarEventList.do', type: 'post', data: { "calendarId" : $('#calendarId').val() }, async: false, success: function(lists) { if(lists.length != 0) { data.chk = true; data.cnt = lists.length; data.title = new Array(); data.description = new Array(); data.start = new Array(); data.end = new Array(); data.eventId = new Array(); $.each(lists, function(i, item){ data.title[i] = item.summary; data.description[i] = item.description; data.start[i] = new Date(item.start.dateTime.value); data.end[i] = new Date(item.end.dateTime.value); data.eventId[i] = item.id; }); }else { data.chk = false; } } }); } // ÁÖ´ÜÀ§·Î ȸ鿡 ±×¸°´Ù function screenWriteWeek() { var date = new Date(); var month = date.getMonth()+1+locationMonth; if(month == 0) { locationYear--; locationMonth = 12 - Math.abs(locationMonth); month = date.getMonth()+1+locationMonth; }else if(month == 13) { locationYear++; locationMonth = locationMonth - 12; month = date.getMonth()+1+locationMonth; } var year = date.getFullYear()+locationYear; if(locationWeek < 0) { locationMonth--; month = date.getMonth()+1+locationMonth; if(month == 0) { locationYear--; locationMonth = 12 - Math.abs(locationMonth); month = date.getMonth()+1+locationMonth; year = date.getFullYear()+locationYear; } if(new Date(year, month-1, calendar.lastDay(year, month)).getDay() == 6) { locationWeek = calendar.make(year, month).length/7-1; }else { locationWeek = calendar.make(year, month).length/7-2; } }else if(locationWeek > calendar.make(year, month).length/7-2) { locationMonth++; month = date.getMonth()+1+locationMonth; if(month == 13) { locationYear++; locationMonth = locationMonth - 12; month = date.getMonth()+1+locationMonth; year = date.getFullYear()+locationYear; } locationWeek = 0; } var months = [month-1, month, month+1]; if(month == 1) { months = [12, month, month+1]; }else if(month == 12) { months = [month-1, month, 1]; } var monthDay = calendar.make(year, months[1]); var start = 0+locationWeek*7; var last = 6+locationWeek*7; var startIndex = monthDayIndex(monthDay, 1); var lastIndex = monthDayIndex(calendar.makeOne(year, months[1]), calendar.lastDay(year, months[1])) + startIndex; for(var i=start; i<=last; i++) { if(i<startIndex) { $('.week').eq(i%7).text('('+numFormat(months[0])+'.'+numFormat(monthDay[i])+')'); }else if(i <= lastIndex) { $('.week').eq(i%7).text('('+numFormat(months[1])+'.'+numFormat(monthDay[i])+')'); }else { $('.week').eq(i%7).text('('+numFormat(months[2])+'.'+numFormat(monthDay[i])+')'); } } if(locationWeek != 0) { $('#yearMonth').text(year + "³â " + numFormat(months[1]) + "¿ù " + numFormat(monthDay[start]) + "ÀÏ ~ " + numFormat(months[1]) + "¿ù " + numFormat(monthDay[last]) + "ÀÏ"); }else { if(months[1] == 1) { $('#yearMonth').text((year-1) + "³â " + numFormat(months[0]) + "¿ù " + numFormat(monthDay[start]) + "ÀÏ ~ " + year + "³â " + numFormat(months[1]) + "¿ù " + numFormat(monthDay[last]) + "ÀÏ"); }else { $('#yearMonth').text(year + "³â " + numFormat(months[0]) + "¿ù " + numFormat(monthDay[start]) + "ÀÏ ~ " + numFormat(months[1]) + "¿ù " + numFormat(monthDay[last]) + "ÀÏ"); } } var tag = new StringBuffer(); for(var i=0, j=0, k=0; i<384; i++) { if(i%8 == 0) { tag.append('<tr style="text-align: center;">'); j++; } if(j%2 == 1) { if(i%8 == 0) { tag.append('<td rowspan="2" style="height: 5px;></td>'); tag.append('<td style="height: 5px; border-bottom: 1px dotted orange;">'+numFormat(k++)+':00</td>'); }else { tag.append('<td class="'+j+'" style="height: 5px; border-bottom: 1px dotted orange;"></td>'); } }else { if(i%8 < 7) { tag.append('<td class="'+j+'" style="height: 5px; border-top: 1px dotted orange;"></td>'); } } if(i%8 == 7) { tag.append('</tr>'); } } $('#tbody').html(tag.toString()); // Ķ¸°´õ ³¯Â¥Á¤º¸ ó¸® °í¹ÎÇÊ¿ä Áö±ÝÀº ±ÍÂúÀ¸´Ï ´ëÃæ ÀÛ¼º if(data.chk) { for(var i=start; i<=last; i++) { for(var j=0; j<data.cnt; j++) { if(i<startIndex) { weekStartTimeAppend(i, j, monthDay, months, year, -1); weekEndTimeAppend(i, j, monthDay, months, year, -1); }else if(i <= lastIndex) { if(monthDay[i] == data.start[j].getDate() && months[1] == data.start[j].getMonth()+1 && year == data.start[j].getFullYear()) { if(data.start[j].getMinutes() < 30) { $('.'+(data.start[j].getHours()*2+1)).eq(i%7).html(eventTagFormat(getTime(data.start[j]), data.title[j], data.eventId[j], data.description[j])); }else { $('.'+(data.start[j].getHours()*2+2)).eq(i%7).html(eventTagFormat(getTime(data.start[j]), data.title[j], data.eventId[j], data.description[j])); } } if(data.start[j].getHours() != data.end[j].getHours() || (data.start[j].getMinutes() < 30 && data.end[j].getMinutes() >= 30)) { if(monthDay[i] == data.end[j].getDate() && months[1] == data.end[j].getMonth()+1 && year == data.end[j].getFullYear()) { if(data.end[j].getMinutes() < 30) { $('.'+(data.end[j].getHours()*2+1)).eq(i%7).html(eventTagFormatEnd(getTime(data.end[j]), data.title[j], data.eventId[j], data.description[j])); }else { $('.'+(data.end[j].getHours()*2+2)).eq(i%7).html(eventTagFormatEnd(getTime(data.end[j]), data.title[j], data.eventId[j], data.description[j])); } } } }else { weekStartTimeAppend(i, j, monthDay, months, year, 1); weekEndTimeAppend(i, j, monthDay, months, year, 1); } } } } } // startTime Tag append function weekStartTimeAppend(i, j, monthDay, months, year, num) { if(monthDay[i] == data.start[j].getDate() && months[0] == data.start[j].getMonth()+1) { if(months[0] == 12 && year+num == data.start[j].getFullYear()) { if(data.start[j].getMinutes() < 30) { $('.'+(data.start[j].getHours()*2+1)).eq(i%7).html(eventTagFormat(getTime(data.start[j]), data.title[j], data.eventId[j], data.description[j])); }else { $('.'+(data.start[j].getHours()*2+2)).eq(i%7).html(eventTagFormat(getTime(data.start[j]), data.title[j], data.eventId[j], data.description[j])); } }else if(year == data.start[j].getFullYear()) { if(data.start[j].getMinutes() < 30) { $('.'+(data.start[j].getHours()*2+1)).eq(i%7).html(eventTagFormat(getTime(data.start[j]), data.title[j], data.eventId[j], data.description[j])); }else { $('.'+(data.start[j].getHours()*2+2)).eq(i%7).html(eventTagFormat(getTime(data.start[j]), data.title[j], data.eventId[j], data.description[j])); } } } } // endTime Tag append function weekEndTimeAppend(i, j, monthDay, months, year, num) { if(data.start[j].getHours() != data.end[j].getHours() || (data.start[j].getMinutes() < 30 && data.end[j].getMinutes() >= 30)) { if(monthDay[i] == data.end[j].getDate() && months[2] == data.end[j].getMonth()+1) { if(months[2] == 1 && year+num == data.end[j].getFullYear()) { if(data.end[j].getMinutes() < 30) { $('.'+(data.end[j].getHours()*2+1)).eq(i%7).html(eventTagFormatEnd(getTime(data.end[j]), data.title[j], data.eventId[j], data.description[j])); }else { $('.'+(data.end[j].getHours()*2+2)).eq(i%7).html(eventTagFormatEnd(getTime(data.end[j]), data.title[j], data.eventId[j], data.description[j])); } }else if(year == data.end[j].getFullYear()) { if(data.end[j].getMinutes() < 30) { $('.'+(data.end[j].getHours()*2+1)).eq(i%7).html(eventTagFormatEnd(getTime(data.end[j]), data.title[j], data.eventId[j], data.description[j])); }else { $('.'+(data.end[j].getHours()*2+2)).eq(i%7).html(eventTagFormatEnd(getTime(data.end[j]), data.title[j], data.eventId[j], data.description[j])); } } } } } //ÀÏÁ¤ Á¾·á ű׸¦ ¸¸µé¾î ÁØ´Ù function eventTagFormatEnd(time, title, eventId, description) { var tag = new StringBuffer(); tag.append("<p>"); tag.append('<a style="color: red;" data-toggle="collapse" data-target="#collapseExample'+eventId+'" aria-expanded="false" aria-controls="collapseExample" onclick="collapse(\''+eventId+'\')">'); tag.append(time+" "+title); tag.append('</a>'); tag.append("</p>"); return tag.toString(); } // ÀÌÀü ÁÖ À̵¿ function moveWeekPre() { locationWeek--; screenWriteWeek(); } // ´ÙÀ½ ÁÖ À̵¿ function moveWeekNext() { locationWeek++; screenWriteWeek(); } //ÀÌÀü ´Þ ÁÖ À̵¿ function moveFastWeekPre() { locationMonth--; screenWriteWeek(); } // ´ÙÀ½ ´Þ ÁÖ À̵¿ function moveFastWeekNext() { locationMonth++; screenWriteWeek(); } // ÁÖ´ÜÀ§·Î ¹Ù²Û´Ù function tabWeek() { $('#movePre').attr('onclick', 'moveWeekPre()'); $('#moveNext').attr('onclick', 'moveWeekNext()'); $('#moveFastPre').attr('onclick', 'moveFastWeekPre()'); $('#moveFastNext').attr('onclick', 'moveFastWeekNext()'); if($('#chk').val() != '1') { $('#thead tr:eq(0) td:eq(0)').attr('colspan', '8'); $('#thead tr:eq(1)').prepend('<td>½Ã°£</td>'); $('#chk').val('1'); } screenWriteWeek(); } // ¿ù´ÜÀ§·Î ¹Ù²Û´Ù function tabMonth() { $('#movePre').attr('onclick', 'moveMonthPre()'); $('#moveNext').attr('onclick', 'moveMonthNext()'); $('#moveFastPre').attr('onclick', 'moveFastMonthPre()'); $('#moveFastNext').attr('onclick', 'moveFastMonthNext()'); if($('#chk').val() != '0') { $('#thead tr:eq(0) td:eq(0)').attr('colspan', '7'); $('#thead tr:eq(1) td:eq(0)').remove(); $('.week').text(''); $('#chk').val('0'); } screenWriteMonth(); } $(document).ready(function(){ calendarEventList(); screenWriteMonth(); }); | cs |
4. ½ÇÇàȸé
Ķ¸°´õ ¸®½ºÆ® ȸé
Ķ¸°´õ »ý¼º½Ã modaló¸® ȸé
Ķ¸°´õ ¼öÁ¤½Ã modaló¸® ȸé
Ķ¸°´õ »èÁ¦½Ã sweetalertó¸® ȸé
ÀÏÁ¤ ¿ù ó¸®È¸é
ÀÏÁ¤ ÁÖ Ã³¸®È¸é
ÀÏÁ¤ »ó¼¼º¸±â ȸé
ÀÏÁ¤µî·Ï modaló¸® ȸé
ÀÏÁ¤ ¼öÁ¤Ã³¸® modaló¸® ȸé
ÀÏÁ¤ »èÁ¦½Ã sweetalertó¸® ȸé
ÀÏÁ¤ ÁÖ »ó¼¼º¸±â ȸé
ÀÌ»óÀ¸·Î google calendar API ±¸ÇöÀÌ¿´´Âµ¥¿ä
Àú´Â java·Î ±¸ÇöÇ߱⶧¹®¿¡
¸¸¾à ¹èÆ÷½Ã ±ÇÇѵ¿ÀÇȸéÀ» ¶ç¿ö¾ßÇϴµ¥ ÀüÇô ½á¸ÔÁö ¸øÇÕ´Ï´Ù.(javaÄڵ忡¼ ºê¶ó¿ìÀú¸¦ ½ÇÇà½ÃÅ°±â¶§¹®¿¡ ¤»¤»)
¼Ò°¨À¸·Î´Â API¸¦ ¾²´Âµ¥ »ý°¢º¸´Ù ¸¹Àº ³ë·ÂÀÌ ÇÊ¿äÇÏ°í ±× ½Ã°£¿¡ DB±¸ÃàÇÏ°íµµ ³²¾Æµ¹±â ¶§¹®¿¡ ÃßõÇÏÁö ¾Ê½À´Ï´Ù.
¸¸¾à ¸¸µç´Ù¸é ¹èÆ÷ÇÒ¶§¸¦ À§ÇØ javaScript·Î ±¸ÇöÇϽñ⠹ٶø´Ï´Ù.
Âü°í API¹®¼
¿¬µ¿ : https://developers.google.com/google-apps/calendar/quickstart/js
CRUD ÄÚµå : https://developers.google.com/google-apps/calendar/v3/reference/events/get
Data¼Ó¼º : https://developers.google.com/google-apps/calendar/v3/reference/events
Ãâó : https://handcoding.tistory.com/20
Ãâó: https://sizin.tistory.com/105 [Information Technology WEBlog]