How to make the calendar inverted colors, or change other color characteristics?

Question

Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.

Fomantic has a capable calendar / date picker, but how can I make it appear with inverted colors?

$('#standard_calendar')
  .calendar();

$('#inverted_calendar')
  .calendar({
    className: {
      table: 'ui inverted celled center aligned unstackable table'
    }
  });

<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>


<body>
  <div class='daContent'>
    <p>
      An example of a Fomantic calendar.

    </p>
    <span>Standard colors calendar</span>
    <div class="ui calendar" id="standard_calendar">
      <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Date/Time">
      </div>
    </div>

    </p>



</body>

score 1 · Answer 1 · answered Jan 20 '20 at 09:39

Copied from a Disord conversation: The answer is to include a setting for the calendar table css within the calendar invocation JS. See snippet below where I have added the second, inverted calendar to illustrate.

Notes: It appears that the ccalendar > className > table CSS setting is an entire replacement for the table css class settings. As a benefit, this could allow more refined tweaking. As a negative, if the component CSS were altered and our code remained unaltered then this might be a breaking change case.

$('#standard_calendar')
  .calendar();

$('#inverted_calendar')
  .calendar({
    className: {
      table: 'ui inverted celled center aligned unstackable table'
    }
  });

<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <div class='daContent'>
    <p>
      The first calendar is using standard colors, the second is inverted.

    </p>
    <span>Standard colors calendar</span>
    <div class="ui calendar" id="standard_calendar">
      <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Date/Time">
      </div>
    </div>

    </p>

    <p>
      <span>Inverted colors calendar</span>
      <div class="ui calendar" id="inverted_calendar">
        <div class="ui input left icon">
          <i class="calendar icon"></i>
          <input type="text" placeholder="Date/Time">
        </div>
      </div>
    </p>


</body>

How to make the calendar inverted colors, or change other color characteristics?

1 Answers1