This reference page uses the following components in the following order:
<div id="body-wrapper">
<div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
<!-- Header Section -->
<header id="header" class="main-header sticky-header">
<!-- search-->
<section class="global-searchbar" id="global-searchbar">
<div class="container-fluid blue-bg">
<!-- Do not update any ids without consulting the developer, js may depend on it -->
<form action="#search" class="search-form" id="cse-search-box">
<div class="row d-flex align-items-center buttons-bg-wrapper">
<div class="col-9 col-sm-10">
<input name="cx" type="hidden" value="000238266656426684962:mzli4pte7ko" />
<input name="cof" type="hidden" value="FORID:11" />
<label for="searchField">
<span class="visually-hidden-focusable text-white">Search Bar</span>
</label>
<input tabindex="-1" class="form-control global-searchfield" id="searchField" name="q" onblur="if (this.value == '') {this.value = 'Search UT San Antonio';}" onfocus="if (this.value == 'Search UT San Antonio') {this.value = '';}" size="15" type="text" value="Search UT San Antonio" />
</div>
<div class="col-3 col-sm-2">
<button class="btn btn-secondary btn-search" type="submit" id="search-button" tabindex="-1">
<span class="visually-hidden-focusable">Search</span>
</button>
</div>
</div>
</form>
</div>
</section>
<!-- .search -->
<!-- top-bar -->
<section class="top-bar primary">
<div class="container-fluid g-0">
<div class="row align-items-center">
<div class="col-4">
<a href="https://www.utsa.edu" title="UT San Antonio" class="tb-logo">
<!-- old classes: logo-full d-none d-sm-block -->
<img src="../../college-dls/utsa/images/ut-san-antonio-horizontal.svg" width="333px" height="20px" class="" alt="The University of Texas at San Antonio" />
</a>
</div>
<div class="col-8">
<nav class="quick-links-container" aria-label="Global Navigation">
<ul class="quick-links">
<li><a href="https://utsa.edu/today/" id="a-header-topbar-utsa-today" aria-label="UT San Antonio News">News</a></li>
<li><a href="https://my.utsa.edu/" id="a-header-topbar-myutsa">myUTSA</a></li>
<li class="search-toggle">
<a href="#" class="global-search" id="search" role="button"><span class="fas fa-search"></span> <span class="visually-hidden" id="search-title">Search</span></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-- Sticky Header -->
<div class="top-navigation" aria-label="Main Navigation">
<!-- Main Header -->
<div id="main-header">
<div class="container">
<nav class="navbar navbar-stacked navbar-expand-md" aria-label="Top Navigation">
<a class="navbar-brand navbar-brand-stacked" href="#" aria-label="Logo Image">
<picture>
<source media="(max-width: 575.98px)" srcset="../../college-dls/college/images/logos/Health_Community_Policy_Type_2Line_Blu.svg" />
<source media="(max-width: 991.98px)" srcset="../../college-dls/college/images/logos/Health_Community_Policy_Type_1Line_Blu.svg" />
<img class="college-logo" width="100%" height="26px" alt="Full College Name Goes Here" src="../../college-dls/college/images/logos/Health_Community_Policy_Type_1Line_Blu.svg" />
</picture>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar4" aria-label="Toggle">
<span class="navbar-toggler-icon"><i class="fal fa-bars"></i></span>
<span class="navbar-toggler-close-icon" style="display: none;"><i class="fal fa-times"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar4">
<ul class="navbar-nav">
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Programs menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="programs">Programs</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Undergraduate-Programs" target="_parent">Undergraduate</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Masters-Programs" target="_parent">Master's Programs</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Doctoral-Programs" target="_parent">Doctoral Programs</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Certificate-Programs" target="_parent">Certificate Programs</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Concentrations" target="_parent">Concentrations</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/programs/index.html#Minors" target="_parent">Minors</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Faculty menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="faculty">Faculty</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/faculty/index.html" target="_parent">Faculty</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/faculty/council/index.html" target="_parent">Faculty Council</a>
</div>
</li>
<li class="nav-item"><a aria-label="HCAP Research" class="nav-link" href="https://hcap.utsa.edu/research/index.html" target="_parent">Research</a></li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Disciplines menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="disciplines">Disciplines</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/criminal-justice/index.html" target="_parent">Criminology and Criminal Justice</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/kinesiology/index.html" target="_parent">Kinesiology</a>
<a aria-label="Nutrition and Dietetics" class="dropdown-item" href="https://hcap.utsa.edu/nutrition-and-dietetics/index.html" target="_parent">Nutrition and Dietetics</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/psychology/index.html" target="_parent">Psychology</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/public-administration/index.html" target="_parent">Public Administration</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/public-health/index.html" target="_parent">Public Health</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/social-work/index.html" target="_parent">Social Work</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/sociology-and-demography/index.html" target="_parent">Sociology and Demography</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="Student Success menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="student-success">Student Success</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/index.html" target="_parent">Student Success Home</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/aid-scholarships.html" target="_parent">Awards, Aid and Scholarships</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/career-success.html" target="_parent">Career Success</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/academic-success.html" target="_parent">Academic Success</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/student-success-center.html" target="_parent">Student Success Center</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/student-success/timeline.html" target="_parent">Roadmap to Success</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="News & Events menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="news--amp--events">News & Events</a>
<div class="dropdown-menu">
<a aria-label="College for Health, Community and Policy News" class="dropdown-item" href="https://hcap.utsa.edu/news/index.html" target="_parent">News</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/events/index.html" target="_parent">Events</a>
</div>
</li>
<li class="nav-item">
<a aria-expanded="false" aria-haspopup="true" aria-label="About menu dropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="about">About</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://hcap.utsa.edu/about/index.html" target="_parent">About Us</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/deans-office.html" target="_parent">Leadership and Staff</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/meet-the-dean.html" target="_parent">Meet the Dean</a>
<a aria-label="Business Service Center" class="dropdown-item" href="https://hcap.utsa.edu/about/business-service-center/index.html" target="_parent">Business Service Center</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/contact-us.html" target="_parent">Contact Us</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/support-hcap/index.html" target="_parent">Support HCAP</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/adv-council.html" target="_parent">Dean's Advisory Council</a>
<a class="dropdown-item" href="https://hcap.utsa.edu/about/restorative-practices.html" target="_parent">Restorative Practices</a>
</div>
</li>
<li class="nav-item mobile-nav-btns">
<a class="action-btn" href="https://hcap.utsa.edu/requestinfo.html" target="_parent">Request Info <i class="fas fa-arrow-right"></i></a>
<a class="action-btn" href="https://www.utsa.edu/visit/" target="_parent">Visit <i class="fas fa-arrow-right"></i></a>
<a class="action-btn" href="https://www.utsa.edu/admissions/" target="_parent">Apply <i class="fas fa-arrow-right"></i></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--End Main Header -->
<!-- Request Apply Header -->
<div class="bottom-absolute-header d-flex flex-row-reverse">
<div id="orange-bg-header">
<div class="container">
<ul class="orange-header-list">
<li class="nav-item"><a class="nav-link" href="#">Request Info</a></li>
<li class="nav-item"><a class="nav-link" href="#">Visit</a></li>
<li class="nav-item"><a class="nav-link" href="#">Apply</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Sticky Header -->
</header>
<!-- Header Section End -->
<!-- Main Content Body -->
<main>
<!--Slider -->
<section class="slider-wrapper" id="main-slider-wrapper">
<section class="banner">
<div class="single-title-wrapper">
<div class="container">
<h1 class="single-title-heading">Calendar </h1>
</div>
</div>
</section>
</section>
<!-- End Slider -->
<section class="page-text-wrapper" id="skipToContent">
<div class="container">
<div class="row">
<div class="col-12 col-md-9" id="page-content">
<div id='calendar'></div>
</div>
<div class="col-md-3 col-md-3" class="sidebar">
<p>To view a calendar or set of calendars, toggle by clicking on a category.</p>
<hr />
<div id="calendars">
</div>
<hr>
<ul class="list-unstyled">
<li><i class="fa-sharp fa-solid fa-rss"> </i> <a href="#">Subscribe to RSS</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ENROLLMENT CTA -->
<!-- END CTA -->
</main>
<div aria-label="Back to Top" role="navigation">
<a href="#top-area" id="top-link" title="To top of page"><em class="back-to-top"> </em><span class="top-link-text">Back to Top</span></a>
</div>
<!--The below is only for the DLS for the button to show-->
<script>
document.getElementById("top-link").style.display = "block";
</script>
<!-- End Main Content Body -->
<!-- Footer -->
<footer id="footer">
<div class="container secondary-footer">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 pb-4">
<div class="pb-3 footer-logo">
<a href="https://www.utsa.edu/">
<img src="../../college-dls/utsa/images/ut-sanantonio-reg-logo-web.svg" height="42px" width="auto" alt="UT San Antonio" />
</a>
</div>
<div class="footer-text">
<p>One UTSA Circle San Antonio, TX 78249</p>
<p>Information: <a href="tel:+12104584011">210-458-4011</a></p>
</div>
</div>
<div class="col-sm-12 col-lg-8">
<div class="secondary-footer-social">
<a class="facebook" href="https://facebook.com/utsa" aria-label="UT San Antonio on Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<a class="twitter" href="https://x.com/utsa" aria-label="UT San Antonio on Twitter"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
<a class="youtube" href="https://youtube.com/user/utsa" aria-label="UT San Antonio on YouTube"><i class="fab fa-youtube" aria-hidden="true"></i></a>
<a class="linkedin" href="https://linkedin.com/school/the-university-of-texas-at-san-antonio/" aria-label="UT San Antonio on Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
<a class="instagram" href="https://instagram.com/utsa/" aria-label="UT San Antonio on Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<nav class="secondary-footer-links" aria-label="Secondary Footer Links">
<ul class="list-unstyled">
<li>
<a href="https://utsa.edu/about/careers#_ga=2.180574631.1891322053.1753909729-1983867998.1741794788">Careers</a>
</li>
<li>
<a href="https://map.utsa.edu">Campus Map</a>
</li>
<li>
<a href="https://utsa.edu/about/directories">Directories</a>
</li>
<li>
<a href="https://utsa.edu/about/university-organization">University Organization</a>
</li>
</ul>
</nav>
</div>
</div>
<hr>
<div class="copyright-subfooter">
<div class="row">
<div class="col-sm-12">
<nav class="subfooter-links">
<ul class="list-unstyled">
<li class="nav-item">
<div class="utsa-copyright">© 2025 The University of Texas at San Antonio
</div>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/ba-administration-operations/services/risk-emergency-management/business-continuity-emergency-management/emergency-response-guide.html" id="s-footer-response-guide">Emergency Response Guide</a>
</li>
<li class="nav-item">
<a href="https://utsa.edu/policies" id="s-footer-policies">Policies</a>
</li>
<li class="nav-item">
<a href="https://utsa.edu/policies/accessibility" id="s-footer-web-accessibility">Web
Accessibility</a>
</li>
<li class="nav-item">
<a href="https://utsa.edu/policies/reqlinks.html" id="s-footer-required-links">Required
Links</a>
</li>
<li class="nav-item">
<a href="https://utsystem.edu/" id="s-footer-ut-system">UT System</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!--End Footer -->
</script>
</div>
/* components/04-reference-pages/21-event-calendar/event-calendar.scss */
/* BEGIN event-calendar.scss */
#calendars ul, #sidebar ul {
list-style-type: none;
padding-left: 10px;
}
.fade {
opacity:1;
}
table.fc-col-header, table.fc-scrollgrid{
padding: 0px 0px;
margin-bottom: 0px;
}
.fc-button-group button {
outline: none;
}
.fc-basic-view .fc-day-number {
text-align: right;
}
#table {
border-color: #eee;
}
.ui-widget-header {
background:none;
border: 1px solid #ddd;
}
.ui-widget-content {
border: 1px solid #ddd;
}
.fc-header-title h2 {
font-size: 2em;
}
.fc-event {
display:none;
font-size:0.95em;
/*0.83*/
font-weight:normal;
zoom: 1;
filter: alpha(opacity=90);
opacity: 0.90;
}
.fc-event:hover {
text-decoration: none;
filter: alpha(opacity=100);
opacity: 1;
}
.fc-event-inner {
line-height: 15px;
}
.fc-today {
background-image: none;
background-color: #fdf4b9;
}
#mainContent a {
color:inherit;
font-size:0.8em;
}
#calendars {
z-index: 1000;
}
#calendars li a span {
display: block;
height: 20px;
/*16*/
width: 20px;
/*16*/
margin-right: 5px;
float: left;
}
#calendars li a {
display:block;
margin:10px;
}
.off {
opacity: 0.4;
}
.popover {
width:300px;
}
.popover-title, .popover-content {
font-size: 12px;
}
.popover-title {
font-weight: bold;
}
.fc-day-top {
opacity: 1;
font-weight: 800;
font-size: 1.1rem;
color: #606060;
}
.fc-day-top.fc-other-month {
opacity: 1;
font-size: 0.9rem;
font-weight: 200;
color: #606060;
}
.fade:not(.show) {
opacity: inherit;
}
.btn-primary {
border-color:#495970;
}
.fc-content {
font-size: .9rem;
}
.fc-toolbar h2 {
font-size: 2.125rem;
}
.fc-row:first-child table {
margin-bottom: 0px;
}
.pull-right{
float: right;
}
/* Dark Mode - Events Calendar */
@include color-mode(dark) {
.fc-head .fc-head-container .fc-row.fc-widget-header {
.fc-day-header.fc-widget-header {
color: $orange;
}
}
.fc-ltr .fc-basic-view .fc-day-top {
&.fc-past>.fc-day-number, &.fc-future>.fc-day-number {
color: $grey;
}
&.fc-other-month.fc-future>.fc-day-number, &.fc-other-month.fc-past>.fc-day-number {
color: $white;
font-weight: 300;
}
&.fc-today>.fc-day-number {
color: $blue;
}
}
.fc-ltr .fc-list-heading-main, .fc-ltr .fc-list-heading-alt {
color: $blue;
}
.fc-unthemed .fc-list-empty, .fc-unthemed .fc-list-item:hover td {
color: $blue;
}
.popover-header {
color: $white;
}
.fc-has-url{
background-color: $grey-d;
&:hover{
color: $blue;
a{
color: $blue;
}
}
}
}
/* Dark Mode - Events Calendar END */
/* END event-calendar.scss */
<div id="body-wrapper">
<div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
<!-- Header Section -->
<header id="header" class="main-header sticky-header">
{{ render '@global-header' }}
{{ render '@site-navigation' }}
</header>
<!-- Header Section End -->
<!-- Main Content Body -->
<main>
<!--Slider -->
<section class="slider-wrapper" id="main-slider-wrapper">
{{> @banner--slim}}
{{!-- {{> @breadcrumb }} --}}
</section>
<!-- End Slider -->
<section class="page-text-wrapper" id="skipToContent">
<div class="container">
<div class="row">
<div class="col-12 col-md-9" id="page-content">
<div id='calendar'></div>
</div>
<div class="col-md-3 col-md-3" class="sidebar">
<p>To view a calendar or set of calendars, toggle by clicking on a category.</p>
<hr />
<div id="calendars">
{{!-- Content is created on the fly using JS. --}}
</div>
<hr>
<ul class="list-unstyled">
<li><i class="fa-sharp fa-solid fa-rss"> </i> <a href="#">Subscribe to RSS</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ENROLLMENT CTA -->
{{!-- {{ render '@enrollment-call-to-action' }} --}}
<!-- END CTA -->
</main>
{{ render '@back-to-top' }}
<!-- End Main Content Body -->
{{ render '@global-footer' }}
</script>
</div>