CINXE.COM
IPCC - Calendar
<!DOCTYPE html> <html lang="en"> <head> <title>IPCC - Calendar</title> <meta charset="utf-8"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="280"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="/apps/common/css/bootstrap5.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <style type="text/css"> body { background-color: aliceblue;} .navbar {position:fixed;left:0;top:0;right:0;z-index:100;} .pagelayout {margin-top: 80px; z-index:0;margin-bottom: 40px;} footer { position:fixed; bottom:0;left:0;right:0;opacity:0.4;} .bg-custom-ipcc-banner {background-color: #4265A7; color:#ccddee; opacity:0.8;} .navbar-collapse .nav-item { font-weight:bold;} .small {font-size:0.9em;} .smaller { font-size: 0.85em; } .inactive { background-color: #ededed; opacity: 0;} .inner { width:100%; padding: 0px 0px; margin: 0px; border-collapse: collapse; } .inner thead tr { line-height:15px; background-color: cornflowerblue; opacity:0.50; filter:alpha(opacity=50); font-weight: bold; align: right; color: blue; } td .label { margin-top:-20px; vertical-align: top; display: inline; float: top; font-size: 0.85em; line-height: 13px; } .label ul { margin-left: -20px; padding-left:15px; margin-bottom:0px;} .text-secondary, #find, .moreinfo {cursor: pointer; } col {width:14%;} .btn-menu {cursor:pointer; padding:4px; font-size:1.1rem;} .btn-menu:hover { background-color: #0d6efd; border-radius: 50%; color: #ccddee !important; } #divcalendar, #divbroadcasts { overflow-x: hidden; } .thead-light {background-color: cornflowerblue; color: #fff;} .inactive { background-color: #ededed; opacity: 0;} .inner { width:100%; padding: 0px 0px; margin: 0px; border-collapse: collapse; } .inner thead tr { line-height:15px; background-color: aliceblue; opacity:0.50; filter:alpha(opacity=50); font-weight: bold; align: right; color: black; } @media print { .no-print, .no-print * { display: none !important; } } </style> <script src="/apps/common/js/jquery-3.4.1.min.js"></script> <script src="/apps/common/js/popper.min.js"></script> <script src="/apps/common/js/bootstrap5.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-custom-ipcc-banner"> <div class="container-fluid"> <a class="navbar-brand" href="https://www.ipcc.ch"> <img src="/apps/common/images/ipcc.png" height="36" alt="IPCC Calendar" title='IPCC Calendar'> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMnu" aria-controls="navbarMnu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon navbaricon"></span> </button> <div class="collapse navbar-collapse" id="navbarMnu"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="calendar.php" id="navProxy" role="button" data-bs-toggle="dropdown" aria-expanded="false">View</a> <ul class="dropdown-menu" aria-labelledby="navProxy"> <li><a id='bymonth' class='dropdown-item'>By Month</a></li> <li><a id='byyear' class='dropdown-item'>By Year</a></li> <li><a href='calendarupcoming.php' class='dropdown-item'>Upcoming</a></li> <li><hr class="dropdown-divider"></li> <li><a href='calendaroverview.php' class='dropdown-item'>Overview</a></li> </ul> </li> <li class="nav-item"> <a href="search.php" class="nav-link ">Search</a> </li> <li class="nav-item"> <a href="outreachevents.php" class="nav-link ">Outreach</a> </li> </ul> </div> <h5 class='float-right d-none d-lg-inline smaller'>Calendar By Month</h5> </div> </nav> <div class='container-fluid pagelayout'> <div class="row"> <div class="col"> <div class='card'> <div class='card-header'> <div class='input-group'> <button type='button' class='btn btn-outline-primary navigate no-print' id='previousyear' title='Previous Year'><i class="bi bi-skip-backward"></i></button> <button type='button' class='btn btn-outline-primary navigate no-print mx-1' id='previoumonth' title='Previous Month'><i class="bi bi-caret-left"></i></button> <span class='px-2 bg-light pt-1 fw-bold fs-6 text-primary' id='find' title='Quick Jump'></span> <button type='button' class='btn btn-outline-primary navigate no-print mx-1' id='nextmonth' title='Next Month'><i class="bi bi-caret-right"></i></button> <button type='button' class='btn btn-outline-primary navigate no-print' id='nextyear' title='Next Year' ><i class="bi bi-skip-forward"></i></i></button> <button type='button' class='btn btn-outline-success no-print ms-1' id='today' title='Today' >Today</button> <button type='button' class='btn btn-outline-secondary no-print ms-1' id='switch' title='Toggle display' ><i class="bi bi-toggles2"></i></button> </div> </div> <div class='card-body'> <div id='divcalendar'></div> </div> <div class='card-footer'> <div id='divbroadcasts'></div> </div> </div> </div> </div> </div> <footer class='d-block bg-light border no-print'> <div class="row m-0 pt-1"> <div class="col"> <p class='small pt-2 pb-0'><span class='font-weight-bold text-primary mnufooter'>© Intergovernmental Panel on Climate Change</span></p> </div> </div> </footer> <!-- helper dialog boxes --> <div class="modal fade" id="myFinder" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header py-1 bg-primary text-light font-weight-bold"> <h5 class='text-center'>Quick Navigate</h5> </div> <div class="modal-body"> <form> <div class="form-group row mb-1"> <label for="txtmonth" class="col-sm-3 col-form-label py-0">Month</label> <div class="col-sm-9"> <select id='txtmonth' name='txtmonth' class='form-control form-control-sm'> <option value='1' >January</option><option value='2' >February</option><option value='3' >March</option><option value='4' >April</option><option value='5' >May</option><option value='6' >June</option><option value='7' >July</option><option value='8' >August</option><option value='9' >September</option><option value='10' >October</option><option value='11' selected>November</option> </select> </div> </div> <div class="form-group row mb-1"> <label for="txtyear" class="col-sm-3 col-form-label py-0">Year</label> <div class="col-sm-9"> <select id='txtyear' name='txtyear' class='form-control form-control-sm'> <option value='2020' >2020</option><option value='2021' >2021</option><option value='2022' >2022</option><option value='2023' >2023</option><option value='2024' selected>2024</option><option value='2025' >2025</option><option value='2026' >2026</option><option value='2027' >2027</option> </select> </div> </div> </form> </div> <div class="modal-footer"> <button type='button' class='btn btn-outline-success' id='btnjump' title='Navigate'>Navigate</button> <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button> </div> </div> </div> </div> <div class="modal fade" id="myInfo"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-body"> <div id='eventinfo'></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- helper dialog boxes --> <script> $(document).ready(function() { var _dt = new Date(); const _monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var _mn = _dt.getMonth() + 1; // note: getMonth returns 0-11 //var _yr = _dt.getFullYear(); var _yr = 2024; var _currentmode = "grid"; function loadcalendar() { $("#find").html(_monthNames[_mn-1] + " - " + _yr); $("#divcalendar") .html("Retrieving calendar...") .load("subform/_calendar.php?posted=true&yr=" + _yr + "&mn=" + _mn + "&format=" + _currentmode); } function loadbroadcasts() { $("#divbroadcasts") .html("Retrieving messages...") .load("subform/_broadcasts.php?posted=true&yr=" + _yr); } $("#previousyear").click(function() { _yr--; loadcalendar(); loadbroadcasts(); }); $("#previoumonth").click(function() { if (_mn == 1) { _mn = 12; _yr--; loadbroadcasts(); } else _mn--; loadcalendar(); }); $("#nextmonth").click(function() { if (_mn == 12) { _mn = 1; _yr++; loadbroadcasts(); } else _mn++; loadcalendar(); }); $("#nextyear").click(function() { _yr++; loadcalendar(); loadbroadcasts(); }); $("#today").click(function() { _mn = _dt.getMonth() + 1; _yr = new Date().getFullYear(); loadcalendar(); }); $("#find").click(function() { showmodal($("#myFinder"), false); }); $("#btnjump").click(function() { _yr = $("#txtyear").val(); _mn = $("#txtmonth").val(); $("#myFinder").modal('hide'); loadcalendar(); loadbroadcasts(); }); $("#switch").click(function() { if (_currentmode == "grid") _currentmode = "list"; else _currentmode = "grid"; loadcalendar(); }); $(document).on('click', '.moreinfo', function() { var _eid = $(this).data('eid'); if (_eid) showmodal($("#myInfo"), true); $("#eventinfo") .html("Retrieving information...") .load("ajax/ajax.calendarevent.php?q=" + _eid); }); $(document).on('click', "#downloadical", function() { var _eid = $(this).data('eid'); if (_eid) window.open("__exportcalendar.php?id=468091&q=" + _eid ); }); $("#byyear").click(function() { location.href = "calendarbyyear.php?year=" + _yr; }); $("#outreach").click(function() { location.href = "outreachevents.php?year=" + _yr; }); function showmodal(_selector, _keyboard) { var _modal = new bootstrap.Modal(_selector, { keyboard: _keyboard }); _modal.show(); } loadcalendar(); loadbroadcasts(); }); </script> </body> </HTML>