code: function createContext(component, name="calendar", styles={}) {
  	let context = pageContext(component, name, reducer);
  	context(styler(styles), reducer);
  	
  	return function setStyle(newStyles) {
  		try {
  			// injects a new styling to the context
  			context(styler(styles, newStyles), reducer);
  		} catch(e) {
  			alert(e.message);
  		}
  	};
  }
docs: /*function classNameMap(name) {
  const namePattern = /week[0-9]+_weekDay[0-9]+/
  const rowPattern = new RegExp("week[0-9]+");
  const dayNamesPattern = new RegExp("dayName_[0-9]+");
  const linePattern = new RegExp("_line[0-9]+");
  
  if(namePattern.test(name)) {
  return '.calendar.day';
  } else if(rowPattern.test(name)) {
  return '.calendar.weekRow';
  } else if(dayNamesPattern.test(name)) {
  return ".calendar.header_dayNames_dayName.weekday";
  } else if(linePattern.test(name)) {
  return ".calendar_line";
  }
  
  switch(name) {
  case 'calendar':
  return ".calendar-self";
  case 'calendar_navbar':
  return ".calendar.header .calendar.header_navbar";
  case 'calendar_navbar_prevMonth':
  case 'calendar_navbar_nextMonth':
  return ".calendar.header_navbar_arrow";
  case 'calendar_navbar_monthLabel':
  return ".calendar.header_navbar_monthLabel";
  case 'calendar_calendarYear_yearLabel':
  return ".calendar_calendarYear_yearLabel";
  case 'calendar_body':
  return ".calendar.body";
  case 'calendar_calendarDays':
  return ".calendar.header_dayNames";
  }
  
  return ".calendar";
  }